HTML <ul> | Change particular <li> color onclick and other <li> in the same <ul> to default color
Solution 1
The way you do it:
var $li = $('#menu li').click(function() {
$li.removeClass('selected');
$(this).addClass('selected');
});
with this CSS for selected item:
li.selected {
color: green;
}
Don't ever use css
method for such things, this is very obtrusive approach which requires you to modify JS code when you want to change styling. If tomorrow you decide to add a background image to selected item, what will you have to do if you go with .css
approach? You should use classes for this, in this case you write JS once and forget about this. Styles are for CSS, UI logic is for JS.
Here is 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>
Solution 2
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 using addClass/removeClass.
Solution 3
One solution is this:
$("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>
Solution 4
Here is code without using any library or frameworks. You can acheive this using javascript.
<div>
<ul>
<li class="active">one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
Script goes here ....
function myFunction(e) {
var elems = document.querySelector(".active");
if(elems !==null){
elems.classList.remove("active");
}
e.target.className = "active";
}
css goes here....
li.active {
color: green;
}
Related videos on Youtube
Comments
-
Edwin over 1 year
I want to have 5 lists such than when any of them is clicked, it turns to green and turn the other lists to black if any of them is green.
Here's my list:
<div id="menu"> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> </div>
I have written the jquery. However, it's not concise, as I have to select
$('#menu li:first-child').. and $('#menu li:nth-child(2 to 5)')..
Please check out the demo and let me know the easiest way you have to get this done
DEMO:
-
Paulie_D over 9 yearsI'd prefer to do it with
addClass/removeClass
but this works +1 -
Edwin over 9 years@Paulie_D That's a great solution too! Thanks
-
Paulie_D over 9 yearsThe
:active
pseudo-class is not the same as a click. It's amousedown
only event and not persistent. -
Arindam Nayak over 9 yearsI agree, i have updated my post, just in case, OP might be interested in this solution, i posted this.
-
Yang over 9 yearsShouldn't
$('li').css('color','black');
be just$(this).css('color','black');
? Or even using a chain, like$(this).css('color', 'green').css('color', 'black');
-
Edwin over 9 yearsThanks for the words of wisdom. I'll definitely keep that in mind to separate CSS for Styles and JS for UI Logic