javascript - 多标签点击功能

Question

大家好，我正在尝试制作一个 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>

Answer 1

您有 2 个问题。

第一个在 initTabs_ 函数上。 它采用两个 MaterialTabs 的所有 .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 src 引用相同的 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