多個標籤點擊功能

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個問題。

1st位於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'); 

的seccond問題是與標籤ID和HREF索馬里紅新月會在這兩個面板引用的編號相同，如果你改變了第二面板如下：

<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