分别为每个元素运行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

现在你的代码针对所有ul.material--switch li元素作为一个集合; 您的代码没有任何迹象表明您希望对其执行单独的选项卡集。 在这里，我在每个组周围添加了一个.container div，以包含tabset及其可用选项; 您的函数是为每个.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

将每个集合包装在一个包含div中，然后只需将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"> <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> </div> <div class="container"> <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> </div>