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');

如果您按如下所示更改第二个面板，则第二个问题是两个面板中的标签ids和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

多个标签点击功能

1 个答案: