How to remove all class l tags as long as they have a different id than a selected one?

Question

How to remove all class l tags as long as they have a different id than a selected one?

Navigation

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

1

This is the code I use to add the classes and then remove them, is working but if I have more menus the code is plowed giant and I do not want that to happen

base_url = $('#base_url').val();

$("li#6").on('click', function() {

  url = $("li#6 a").attr('data');
  $("li#4").addClass('active');
  $("li#6").addClass('active');
  $("li#6 a").addClass('toggled');
  $("#paginas").load(base_url + url);
  
  // remover clases
  
  $("li#7").removeClass('active');
  $("li#7 a").removeClass('toggled');
  $("li#8").removeClass('active');
  $("li#8 a").removeClass('toggled');
})
// Siguiente  menu
$("li#7").on('click', function() {

    url = $("li#7 a").attr('data');
    $("li#4").addClass('active');
    $("li#7").addClass('active');
    $("li#7 a").addClass('toggled');
    $("#paginas").load(base_url + url);
    
    // remover clases
    $("li#6").removeClass('active');
    $("li#6 a").removeClass('toggled');
    $("li#8").removeClass('active');
    $("li#8 a").removeClass('toggled');
})

What I want to do is that when I click on a li tag with an id I will remove the classes from all li with a different id

javascript jquery html5

asked by Luis 11.05.2018 в 16:52

source

2 answers

Error inserting data into a table in SQL Server 2008 Problem creating user

score 3 · Answer 1

You can use siblings, like this:

$('li').click(function() {
  $(this).addClass('selected');
  $(this).siblings().removeClass('selected');
});

.selected{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="id1">1</li>
  <li id="id2">2</li>
  <li id="id3">3</li>
  <li id="id4">4</li>
</ul>

score 2 · Answer 2

You can make a selection with :not :

$('li').click(function() {
 $('li:not(#${this.id})').css('color','red');
 $(this).css('color','black');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="a">Hola</li>
<li id="b">Hola</li>
<li id="c">Hola</li>
<li id="d">Hola</li>
</ul>