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