Change class active on click menu list

Question

I'm trying to change the activeTest class of section tag on click, and remove the class that from the section he was, and put on the section I expect to;

I tried the parent() and 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

To connect links and tabs you should use data-attr

Something like this

 $('[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>

Answer 2

Using Your Code

If your order of links is always the same as the sections you can use the index of the clicked link to determine which section to make visible.

Using index on $("#test123 .links") allows you to query for the index of the clicked link.

Using eq on the collection of $(".conteudo-projetoPesquisa") using the previously determined index will select the section in the same index the clicked link is in.

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

---

Alternative using Data Attributes

However, if you have any control over it, it would be better to "pair" the elements. If you for example can populate a data attribute to assign the matching section number to the link itself than the order is not important.

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

Then you can assign the same value to each section and therefore "pair" the elements.

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

Then you can use the following code:

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