在单击菜单列表上更改活动类

Question

我试图在点击时更改 activeTest 类标记，并从他所在的部分删除该类，并将其放在我期望的部分上;

我尝试了parent()和sibling()。

＆＃13;

＆＃13;

$(document).ready(function() {

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

＆＃13;

.conteudo-projetoPesquisa {
  display: none;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用您的代码

如果您的链接顺序始终与部分相同，则可以使用所点击链接的索引来确定要显示的部分。

在$("#test123 .links")上使用index可以查询所点击链接的索引。

使用先前确定的索引在$(".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>