Adding and removing classes when clicking Jquery [duplicate]

Question

Adding and removing classes when clicking Jquery [duplicate]

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (0 votes)
#4 by (0 votes)

0

Good afternoon, I would like to add and remove the "active" classes by clicking each option, and displaying the contents of each one, follows the jsfiddle example. Thanks

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

asked by anonymous 17.04.2018 / 19:22

4 answers

3

Toggleclass already does this for you, here's 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><pclass="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>

17.04.2018 / 19:36

0

You can use the addClass () function and removeClass ()

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

17.04.2018 / 19:34

0

Because the list is separate from div s, you need to create some binding of a <li> with each div . For this you can put the div s within a div container . So you can bind the index of each li to the index of each div within the container . That is, li index 0 refers to div index 0 and so on.

You could also create% s of% s attributes for each id , but this would inflate HTML with more unnecessary code.

To change the element class you can use div and show / hide toggleClass s by its 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><aclass="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>

17.04.2018 / 19:48

How can I change the appearance of the form according to the operating system? File Encoding in ASC II

score 2 · Accepted Answer

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 it removes the 'active' from all 'a' and toggles between contents.

Example: link

I've done everything to not change the html and css, it's working, but it would be nice to put a handle to each content you want shows, because this way will work with only 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 its identifier, so you can create new elements without worrying about changing jquery.

Example: link