在點擊菜單列表上更改活動類別

Question

我試圖在單擊時更改section標簽的activeTest類，並從他所在的部分中刪除該類，然后放入我期望的部分；

我嘗試了parent()和sibling() 。

 $(document).ready(function() { $("#test123 .links").click(function(e) { if (!$(".conteudo-projetoPesquisa").hasClass('active')) { $(".conteudo-projetoPesquisa.active").removeClass("active"); $(".conteudo-projetoPesquisa.active").siblings().addClass("active"); } }); }); 

 .conteudo-projetoPesquisa { display: none; } .conteudo-projetoPesquisa.active { display: block !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="test123" class="row center-xs around-md"> <li class="col-xs-12 col-md-4"> <a href="#!" class="links">institucional</a> </li> <li class="col-xs-12 col-md-4 maioresMelhor"> <a href="#!" class="links">Maiores e Melhores</a> </li> <li class="col-xs-12 col-md-4 faleConosco"> <a href="#!" class="links">Fale Conosco</a> </li> </ul> <section class="conteudo-projetoPesquisa container active">1 </section> <section class="conteudo-projetoPesquisa container">2 </section> <section class="conteudo-projetoPesquisa container">3 </section> 

Answer 1

使用您的代碼

如果鏈接的順序始終與部分相同，則可以使用單擊的鏈接的索引來確定要顯示的部分。

在$("#test123 .links")上使用索引允許您查詢單擊鏈接的索引。

在使用先前確定的索引的$(".conteudo-projetoPesquisa")集合上使用eq時，將在單擊鏈接所在的同一索引中選擇該部分。

 $(document).ready(function() { $("#test123 .links").click(function(e) { var index = $("#test123 .links").index(this); $(".conteudo-projetoPesquisa").removeClass('active'); $(".conteudo-projetoPesquisa").eq(index).addClass('active'); }); }); 

 .conteudo-projetoPesquisa { display: none; } .conteudo-projetoPesquisa.active { display: block !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="test123" class="row center-xs around-md"> <li class="col-xs-12 col-md-4"> <a href="#!" class="links">institucional</a> </li> <li class="col-xs-12 col-md-4 maioresMelhor"> <a href="#!" class="links">Maiores e Melhores</a> </li> <li class="col-xs-12 col-md-4 faleConosco"> <a href="#!" class="links">Fale Conosco</a> </li> </ul> <section class="conteudo-projetoPesquisa container active">1 </section> <section class="conteudo-projetoPesquisa container">2 </section> <section class="conteudo-projetoPesquisa container">3 </section> 

---

使用數據屬性的替代方法

但是，如果您對此有任何控制，最好將這些元素“配對”。 例如，如果您可以填充數據屬性以將匹配的段號分配給鏈接本身，則順序並不重要。

<a href="#!" class="links" data-section-id="1">...
<a href="#!" class="links" data-section-id="2">...

然后，您可以為每個部分分配相同的值，從而“配對”元素。

<section class="conteudo-projetoPesquisa container active" data-section-id="1">...
<section class="conteudo-projetoPesquisa container active" data-section-id="2">...

然后，您可以使用以下代碼：

 $(document).ready(function() { $("#test123 .links").click(function(e) { var sectionId = $(this).data('sectionId'); $(".conteudo-projetoPesquisa").removeClass('active'); $(".conteudo-projetoPesquisa[data-section-id=" + sectionId + "]").addClass('active'); }); }); 

 .conteudo-projetoPesquisa { display: none; } .conteudo-projetoPesquisa.active { display: block !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="test123" class="row center-xs around-md"> <li class="col-xs-12 col-md-4"> <a href="#!" class="links" data-section-id="1">institucional</a> </li> <li class="col-xs-12 col-md-4 maioresMelhor"> <a href="#!" class="links" data-section-id="2">Maiores e Melhores</a> </li> <li class="col-xs-12 col-md-4 faleConosco"> <a href="#!" class="links" data-section-id="3">Fale Conosco</a> </li> </ul> <section class="conteudo-projetoPesquisa container active" data-section-id="1">1 </section> <section class="conteudo-projetoPesquisa container" data-section-id="2">2 </section> <section class="conteudo-projetoPesquisa container" data-section-id="3">3 </section> 

Answer 2

要連接鏈接和標簽，您應該使用data-attr

像這樣

  $('[data-tab-trigger]').click(function(){ if($(this).is('.active')){ return false; } var $wrap = $(this).parents('.tab-wrap'); $('[data-tab-trigger]',$wrap).removeClass('active'); $(this,$wrap).addClass('active'); $('[data-tab-section]',$wrap).removeClass('active'); $('[data-tab-section="'+$(this).data('tab-trigger')+'"]',$wrap).addClass('active'); }) 

 .hide-tab{ display:none; padding:20px; background:#333; color:#fff; } .hide-tab.active{ display:block; } .tab-wrap{ margin:20px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tab-wrap"> <div data-tab-trigger="1">show first tab</div> <div data-tab-trigger="2">show second tab</div> <div class="hide-tab" data-tab-section="2"> second tab </div> <div class="hide-tab" data-tab-section="1"> first tab </div> </div> <div class="tab-wrap"> <div data-tab-trigger="1">show first tab</div> <div data-tab-trigger="2">show second tab</div> <div class="hide-tab" data-tab-section="2"> second tab </div> <div class="hide-tab" data-tab-section="1"> first tab </div> </div>