Clever Geek Handbook

HTML <ul> | Change specific <li> color onclick and other <li> s to the same default <ul> color

I want to have 5 lists, for example if when you click on any of them it turns green and the rest of the lists black if any of them is green.

Here's my list:

list

<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</div>

I wrote JQuery. However, this is not concise as I have to choose$('#menu li:first-child').. and $('#menu li:nth-child(2 to 5)')..

Please check out the demo and let me know the easiest way to do this.

DEMO:

http://jsfiddle.net/t7L6d7b4/

+5


source to share


6 answers


How do you do it:

var $li = $('#menu li').click(function() {
    $li.removeClass('selected');
    $(this).addClass('selected');
});

with this CSS for the selected element:

li.selected {
    color: green;
}


Never use a method css

for things like this, it's a very intrusive approach that requires changing the JS code when you want to change the style. If tomorrow you decide to add a background image to the selected element, what do you need to do if you go with an approach .css

? You have to use classes for this, in this case you write JS once and forget about it. Styles for CSS, UI logic for JS.

Here's a demo :

var $li = $('#menu li').click(function() {
    $li.removeClass('selected');
    $(this).addClass('selected');
});
      

        
        
        
      

    
li.selected {
    color: green;
}
      

        
        
        
      

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

<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</div>
Run codeHide result


+8


source


You can just do

$('li').click(function(){
    $('li').css('color','black');
    $(this).css('color', 'green');
});


DEMO The above is simple, but you can create classes and add / remove it with addClass / removeClass.

+3


source


One solution:

$("ul > li").on("click", function(){
    $("ul li").css("color", "black");
    $(this).css("color", "green");   
});
      

        
        
        
      

    
li{
    list-style:none;
    cursor:pointer;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</div>
Run codeHide result


+2


source


You can do it with CSS too! Like this. Behavior. It will show green when clicked, then it will go back to black.

li:active{
    color:green;
}
      

        
        
        
      

    
<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</div>
Run codeHide result


0


source


This works for me with JQuery version 2.1.1, please try this

$(document).on('click', '#menu li', function(){
   $('.#menu li').removeClass('selected');
   $(this).addClass('selected');
});

And add this to your CSS file.

#menu li.selected {
   background-color: rgb(2, 95, 191);
}
0


source


Here is the code without using any library or frameworks. You can achieve this with JavaScript.

<div>
    <ul>
        <li class="active">one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</div>

The script goes here ....

function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}
0


source






More articles:


All Articles