多选项卡点击功能

Question

大家好，我正在尝试做一个jquery选项卡，但是我想使用它，例如，在一个页面中，有100个选项卡，我能在这段时间做些什么。

我正在尝试这个演示链接。如果单击一个蓝色按钮，则可以看到选项卡。单击红色按钮，如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

你有两个问题。

第一种是关于initTabs_函数。对于两个.panel元素，它都需要所有的MaterialTabs 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');

如果您按以下方式更改第二个面板，则两个面板中的选项卡ids和href srcs对相同ids的引用是seccond问题：

<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>

它应该独立于第一个。

您可以找到修改过的代码这里。