Delete and add Class to List with Jquery

Question

Delete and add Class to List with Jquery

Navigation

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

1

Greetings.

I have made a small list, which I want to add a type effect: focus of selection with a background, I give it through a class is-active . the purpose is that when you press another element, delete the class from the one that had it and add it to the new one, I do it with JQUERY but it seems to me that there must be some more functional or better written solution.

I appreciate possible solutions to shorten the code and expand my knowledge. < 3

$(function(){
    $('.one-a').on('click', function(){
        $('.one-a').addClass('is-active');
        $('.one-b').removeClass('is-active');
        $('.one-c').removeClass('is-active');
        $('.one-d').removeClass('is-active');
        $('.one-e').removeClass('is-active');
        $('.one-f').removeClass('is-active');
    });
    $('.one-b').on('click', function(){
        $('.one-b').addClass('is-active');
        $('.one-a').removeClass('is-active');
        $('.one-c').removeClass('is-active');
        $('.one-d').removeClass('is-active');
        $('.one-e').removeClass('is-active');
        $('.one-f').removeClass('is-active');
    });
    $('.one-c').on('click', function(){
        $('.one-c').addClass('is-active');
        $('.one-a').removeClass('is-active');
        $('.one-b').removeClass('is-active');
        $('.one-d').removeClass('is-active');
        $('.one-e').removeClass('is-active');
        $('.one-f').removeClass('is-active');
    });
    $('.one-d').on('click', function(){
        $('.one-d').addClass('is-active');
        $('.one-a').removeClass('is-active');
        $('.one-b').removeClass('is-active');
        $('.one-c').removeClass('is-active');
        $('.one-e').removeClass('is-active');
        $('.one-f').removeClass('is-active');
    });
    $('.one-e').on('click', function(){
        $('.one-e').addClass('is-active');
        $('.one-a').removeClass('is-active');
        $('.one-b').removeClass('is-active');
        $('.one-c').removeClass('is-active');
        $('.one-d').removeClass('is-active');
        $('.one-f').removeClass('is-active');
    });
    $('.one-f').on('click', function(){
        $('.one-f').addClass('is-active');
        $('.one-a').removeClass('is-active');
        $('.one-b').removeClass('is-active');
        $('.one-c').removeClass('is-active');
        $('.one-d').removeClass('is-active');
        $('.one-e').removeClass('is-active');
    });
});

.is-active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <ul>
    <li class="one-a is-active"><a>item a</a></li>
    <li class="one-b"><a>item b</a></li>
    <li class="one-c"><a>item c</a></li>
    <li class="one-d"><a>item d</a></li>
    <li class="one-e"><a>item e</a></li>
    <li class="one-f"><a>item f</a></li>
  </ul>
</div>

javascript jquery css

asked by Gabriela 25.05.2018 в 19:46

source

2 answers

1

You can do it in the following way if you have more li elements in the view

$(".one").click(function(){
  
  $(this).addClass('is-active');
  $(this).siblings().removeClass('is-active');
  
});

.is-active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <ul>
    <li class="one is-active"><a>item a</a></li>
    <li class="one"><a>item b</a></li>
    <li class="one"><a>item c</a></li>
    <li class="one"><a>item d</a></li>
    <li class="one"><a>item e</a></li>
    <li class="one"><a>item f</a></li>
  </ul>
</div>

What the code does above is that when you click on yourself, that is the class "one", you add the class is-active and then with the property siblings of jquery I select the brothers " of the element that are inside the parent lu tag and I remove the class " is-active "

answered by 25.05.2018 в 19:54

Error in consulting the database! from PHP to MYSQL Modify fields phpMyAdmin

score 3 · Accepted Answer

You can do it much simpler like this:

$(function(){
    $('li').on('click', function(){
       $(".is-active").removeClass("is-active");
       $(this).addClass("is-active");
    });
});

.is-active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <ul>
    <li class="one-a is-active"><a>item a</a></li>
    <li class="one-b"><a>item b</a></li>
    <li class="one-c"><a>item c</a></li>
    <li class="one-d"><a>item d</a></li>
    <li class="one-e"><a>item e</a></li>
    <li class="one-f"><a>item f</a></li>
  </ul>
</div>