分別爲每個元素運行jQuery函數

Question

我必須添加到腳本並排運行多個標籤導航？

我已經建立了一個小標籤導航並遇到問題，任何想法如何解決這個問題？

請看看下面的腳本。

$(document).ready(function() { 
 

 
    $('ul.material--switch li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 

 
    $('ul.material--switch li').removeClass('active'); 
 
    $('.tab-content').removeClass('active'); 
 

 
    $(this).addClass('active'); 
 
    $("#" + tab_id).addClass('active'); 
 
    }) 
 

 
})

.material--switch { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
.material--switch li { 
 
    border: 1px solid #f0f0f0; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border-right: 0; 
 
    color: #6f1132; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
} 
 
.material--switch li.active { 
 
    border-color: #039BE5 !important; 
 
    background: #039BE5; 
 
} 
 
.tab-content { 
 
    display: none; 
 
} 
 
.tab-content.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="material--switch"> 
 
    <li class="active" data-tab="option1">option1</li> 
 
    <li data-tab="option2">option2</li> 
 
</ul> 
 

 
<div id="option1" class="tab-content active"> 
 
    show option1 
 
</div> 
 

 
<div id="option2" class="tab-content"> 
 
    show option2 
 
</div> 
 

 

 
<ul class="material--switch"> 
 
    <li data-tab="option3">option3</li> 
 
    <li class="active" data-tab="option4">option4</li> 
 
</ul> 
 

 
<div id="option3" class="tab-content"> 
 
    show option3 
 
</div> 
 

 
<div id="option4" class="tab-content active"> 
 
    show option4 
 
</div>

Answer 1

現在你的代碼的行爲對所有​​元素作爲一組;您的代碼沒有任何跡象表明您要採取獨立的選項卡組。在這裏，我已經爲每個組添加了一個.container div，以包含標籤集及其可用選項;您的功能分別針對每個.container運行，並僅對其內容起作用。

$(document).ready(function() { 
 

 
    $('.container').each(function() { 
 
    var self = $(this); // in the next line `this` will get taken over by the `li`: 
 
    self.find('.material--switch li').click(function() { 
 
     var tab_id = $(this).attr('data-tab'); 
 
     self.find('.active').removeClass('active'); 
 
     $(this).addClass('active'); 
 
     $('#' + tab_id).addClass('active'); 
 
    }); 
 
    }); 
 
    
 
});

.material--switch { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
.material--switch li { 
 
    border: 1px solid #f0f0f0; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border-right: 0; 
 
    color: #6f1132; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
} 
 
.material--switch li.active { 
 
    border-color: #039BE5 !important; 
 
    background: #039BE5; 
 
} 
 
.tab-content { 
 
    display: none; 
 
} 
 
.tab-content.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container"> 
 
    <ul class="material--switch"> 
 
    <li class="active" data-tab="option1">option1</li> 
 
    <li data-tab="option2">option2</li> 
 
    </ul> 
 

 
    <div id="option1" class="tab-content active">option1</div> 
 
    <div id="option2" class="tab-content">option2</div> 
 
</div> 
 

 
<div class="container"> 
 
    <ul class="material--switch"> 
 
    <li class="active" data-tab="option3">option3</li> 
 
    <li data-tab="option4">option4</li> 
 
    </ul> 
 

 
    <div id="option3" class="tab-content active">option3</div> 
 
    <div id="option4" class="tab-content">option4</div> 
 
</div>

Answer 2

包裹每一組中含有格，然後就改變你的jQuery僅多數民衆贊成被點擊的元素的父內指定的元素：

$(document).ready(function() { 
 

 
    $('ul.material--switch li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 
    var parent = $(this).parent().parent(); 
 
    parent.find('ul.material--switch li').removeClass('active'); 
 
    parent.find('.tab-content').removeClass('active'); 
 

 
    $(this).addClass('active'); 
 
    parent.find("#" + tab_id).addClass('active'); 
 
    }) 
 

 
})

.material--switch { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
.material--switch li { 
 
    border: 1px solid #f0f0f0; 
 
    line-height: 36px; 
 
    text-align: center; 
 
    border-right: 0; 
 
    color: #6f1132; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
} 
 
.material--switch li.active { 
 
    border-color: #039BE5 !important; 
 
    background: #039BE5; 
 
} 
 
.tab-content { 
 
    display: none; 
 
} 
 
.tab-content.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
\t <ul class="material--switch"> 
 
\t <li class="active" data-tab="option1">option1</li> 
 
\t <li data-tab="option2">option2</li> 
 
\t </ul> 
 

 
\t <div id="option1" class="tab-content active"> 
 
\t show option1 
 
\t </div> 
 

 
\t <div id="option2" class="tab-content"> 
 
\t show option2 
 
\t </div> 
 
</div> 
 

 
<div class="container"> 
 
\t <ul class="material--switch"> 
 
\t <li data-tab="option3">option3</li> 
 
\t <li class="active" data-tab="option4">option4</li> 
 
\t </ul> 
 

 
\t <div id="option3" class="tab-content"> 
 
\t show option3 
 
\t </div> 
 

 
\t <div id="option4" class="tab-content active"> 
 
\t show option4 
 
\t </div> 
 
</div>