Add and remove classes by clicking Jquery

Asked

Viewed 7,998 times

0

Good afternoon, I would like to add and remove the "active" classes by clicking on each option, and show the contents of each, follow the jsfiddle example. Thank you

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

4 answers

3

Toggleclass already does this for you, follow an example:

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


You can do it this way

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');
        });
    });
});

Clicking removes the 'active' from all 'a' and switches between contents.

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

I did everything not to change html and css, this working, but it would be good to put an identifier for each content you want shows, because this way will work only with two elements.

Using date for identification

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>

I put a date-id to identify your relationship

CSS

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

The same 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');
    });
});

So the action is performed according to your identifier, so you can create new elements without worrying about changing the jquery.

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

  • Is that I want to show other content in each div.

  • I’ll edit it and put it the way you want it

  • I changed it like you asked.

  • I don’t see the need to run . Hide and . show and the use of hasClass, when in the author’s need perhaps toggleClass would already solve

  • @Guilhermenascimento thanks for the tip, I made the change ;)

0

You can use addClass() and removeClass()

$(elemento).addClass('someClass')
$(elemento).removeClass('someClass')

  • $(element). toggleClass(someClass') works best

0

How the list is separate from divs, it is necessary to create some link of a <li> with each div. For that you can put the divs within a div container. So you can link the index of each li with the index of each div within the container. That is, the li index 0 refers to the div index 0 and so on.

You could also create attributes ids for each div, but that would inflate HTML with more unnecessary code.

To change the class of the elements you can use toggleClass and show/hide divs by their index as explained above:

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

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.