大家好,我正在尝试制作一个jQuery选项卡,但我想多次使用它,例如在一页中有100个选项卡,那时候我可以做什么。

我正在此DEMO链接中尝试。如果单击一个蓝色按钮,则可以看到选项卡。单击红色按钮(例如“ STARKS”按钮),然后其他选项卡也不起作用。有人可以在这里帮助我吗?

<div class="icon_c">
  <div class="clickficon"></div>
  <div class="emicon-menu MaterialTabs">
    <ul>
      <li class="tab active"><a href="#starks-panel">Starks</a></li>
      <li class="tab"><a href="#lannisters-panel">Lannisters</a></li>
      <li class="tab"><a href="#targaryens-panel">Targaryens</a><span></span></li>
    </ul>
    <div class="panels">
      <div id="starks-panel" class="panel pactive">
        a
      </div>
      <div id="lannisters-panel" class="panel">
        b
      </div>
      <div id="targaryens-panel" class="panel">
        c
      </div>
    </div>
  </div>
</div>
<div class="icon_b">
  <div class="clickficon"></div>
  <div class="emicon-menu MaterialTabs">
    <ul>
      <li class="tab active"><a href="#starks-panel">Starks</a></li>
      <li class="tab"><a href="#lannisters-panel">Lannisters</a></li>
      <li class="tab"><a href="#targaryens-panel">Targaryens</a><span></span></li>
    </ul>
    <div class="panels">
      <div id="starks-panel" class="panel pactive">
        a
      </div>
      <div id="lannisters-panel" class="panel">
        b
      </div>
      <div id="targaryens-panel" class="panel">
        c
      </div>
    </div>
  </div>
</div>

最佳答案

您有2期。

第一个在initTabs_函数上。
它使用两个MaterialTab的所有.panel div,而应该仅使用MaterialTabs元素的子元素。
您应该替换:

// Select element tabs, document panels
this.tabs_   = this.element_.querySelectorAll('.tab');
this.panels_ = document.querySelectorAll('.panel');


对于:

// Select element tabs, document panels
this.tabs_   = this.element_.querySelectorAll('.tab');
this.panels_ = this.element_.querySelectorAll('.panel');


第二个问题是,如果您按如下方式更改第二个面板,则两个面板引用中的选项卡ID和href srcs都具有相同的ID:

<div class="emicon-menu MaterialTabs">
    <ul>
      <li class="tab active"><a href="#starks-panel1">Starks</a></li>
      <li class="tab"><a href="#lannisters-panel1">Lannisters</a></li>
      <li class="tab"><a href="#targaryens-panel1">Targaryens</a><span></span></li>
    </ul>
    <div class="panels">
      <div id="starks-panel1" class="panel pactive">
        a
      </div>
      <div id="lannisters-panel1" class="panel">
        b
      </div>
      <div id="targaryens-panel1" class="panel">
        c
      </div>
    </div>
  </div>


它应该独立于第一个工作。

您可以找到修改后的代码here

关于javascript - 多标签点击功能,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32465835/

10-11 03:09