0

Boa tarde, gostaria de adicionar e remover as classes "active" ao clicar em cada opção, e mostrar o conteúdo de cada um, segue o jsfiddle de exemplo. Obrigado

Html:

<ul>
<li>
  <a class="active">Opção 1</a>
</li>
<li>
  <a class="">Opção 2</a>
</li>
</ul>

<div class="content active">Mostrar conteúdo 1</div>
<div class="content">Mostrar conteúdo 2</div>

Css:

a {
  cursor: pointer;
}
li a.active {
  border-bottom: 2px solid #000;
}
.content {
  display: none;
}
.content.active {
  display: block;
}
0

4 Respostas 4

3

O Toggleclass já faz isso por você, segue um exemplo:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
  }
  .blue {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>

<script>
$( "p" ).click(function() {
  $( this ).toggleClass( "highlight" );
});
</script>

</body>
</html>
2

Você pode fazer desta forma

Html

<ul>
  <li>
    <a class="active">Opção 1</a>
  </li>
  <li>
    <a class="">Opção 2</a>
  </li>
</ul>
<div class="content active">Mostrar conteúdo 1</div>
<div class="content">Mostrar conteúdo 2</div>

CSS

a {
  cursor: pointer;
}
li a.active {
  border-bottom: 2px solid #000;
}
.content {
  display: none;
}
.content.active {
  display: block;
}

Jquery

$(function(){
    $('ul li a').click(function(i){
        $('ul li a').removeClass('active');
        $(this).addClass('active');
        $('.content').each(function(index) {
            $(this).toggleClass('active');
        });
    });
});

Ao clicar ele remove o 'active' de todos os 'a' e alterna entre os conteúdos.

Exemplo: https://jsfiddle.net/e1dgsj6u/70/

Fiz de tudo para não alterar o html e o css, esta funcionando, mas seria bom colocar um identificador para cada conteúdo que você queira mostra, porque desta forma vai funcionar apenas com dois elementos.

Utilizando data para identificação

HTML

<ul>
  <li>
    <a class="active" data-id='1'>Opção 1</a>
  </li>
  <li>
    <a class="" data-id='2'>Opção 2</a>
  </li>
</ul>
<div class="content active" data-id='1'>Mostrar conteúdo 1</div>
<div class="content" data-id='2'>Mostrar conteúdo 2</div>

Coloquei um data-id para identificar o seu relacionamento

CSS

a {
  cursor: pointer;
}
li a.active {
  border-bottom: 2px solid #000;
}
.content {
  display: none;
}
.content.active {
  display: block;
}

O mesmo css

JQUERY

$(function(){
    $('ul li a').click(function(){
        $('ul li a').removeClass('active');
        $('.content').removeClass('active');
        $(this).addClass('active');
        var id = $(this).data('id');    
        var content = $('.content').filter(function() { 
            return $(this).data("id") == id 
        });    
        content.addClass('active');
    });
});

Assim a ação é realizada de acordo com o seu identificador, assim você pode criar novos elementos sem preocupar em alterar o jquery.

Exemplo: https://jsfiddle.net/e1dgsj6u/72/

5
  • É que eu quero mostrar outro conteúdo em cada div. Commented 17/04/2018 às 17:41
  • vou editar e colocar da forma que você quer Commented 17/04/2018 às 17:48
  • Eu alterei como você pediu. Commented 17/04/2018 às 17:54
  • Não vejo necessidade de executar .hide e .show e nem do uso de hasClass, quando na necessidade do autor talvez o toggleClass já resolveria
    – Syzoth
    Commented 17/04/2018 às 18:38
  • @GuilhermeNascimento obrigado pela dica, fiz a alteração ;) Commented 17/04/2018 às 18:41
1

Você pode utilizar a função addClass() e removeClass()

$(elemento).addClass('someClass')
$(elemento).removeClass('someClass')
1
  • $(elemento).toggleClass('someClass') funciona melhor
    – Otto
    Commented 17/04/2018 às 17:36
0

Como a lista está separada das divs, é preciso criar alguma vinculação de uma <li> com cada div. Para isso você pode colocar as divs dentro de uma div container. Assim você pode vincular o index de cada li com o index de cada div dentro do container. Ou seja, a li de índice 0 se refere à div de índice 0 e assim por diante.

Você poderia também criar atributos ids para cada div, mas isso inflaria o HTML com mais código desnecessário.

Para trocar a classe dos elementos você pode usar toggleClass e mostrar/ocultar as divs pelo seu índice, conforme explicado antes:

$(function(){
   
   $("ul li").click(function(){
      
      var idx = $(this).index();
      
      $(this)
      .parent()
      .find("li a")
      .removeClass("active");
      
      $("a", this)
      .toggleClass("active");
      
      $("div", "#container")
      .removeClass("active")
      .eq(idx)
      .addClass("active");
      
   });
   
});
a {
  cursor: pointer;
}
li a.active {
  border-bottom: 2px solid #000;
}
.content {
  display: none;
}
.content.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
  <a class="active">Opção 1</a>
</li>
<li>
  <a class="">Opção 2</a>
</li>
</ul>

<div id="container">
   <div class="content active">Mostrar conteúdo 1</div>
   <div class="content">Mostrar conteúdo 2</div>
</div>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .