How to get the selected item from UL using jQuery?

Question

I am creating a tab control using Ul and Divs. Ul is used to display the tab heads. When the user selects one Tab (ie , 'Li') ,the tab back color get changed with respect to others.

I want to get the Selected and not selected li in that Ul .

I used

 $(".tab li:selected").css("background-color","red");
 $(".tab li:deselected").css("background-color","white");

It 's not working, I know the code does not work .just guess it. Now may you understood my problem,right?

Answer 1

When you select a tab, you basically click it, so you can do like this:

 $('.tab li').click(function(){
   $(this).css("background-color","red");
   $(this).css("background-color","white");
 });

Now $(this) refers to your selected tab.

Answer 2

I'd say:

$(".tab li").click(function() {
    $(".tab li").css("background-color", "white");
    $(this).css("background-color", "red");
});

Edit: the :selected selector works only for selectable items, such as <option>s inside of <select>s.

Answer 3

When your user selects a tab, add a class to that tab that represents this:

$('.tab li').click(function() {
    ... // your existing code
    $('.tab li').removeClass('selected'); // removes the "selected" class from all tabs
    $(this).addClass('selected'); // adds it to the one that's just been clicked
}

Then, in your CSS, you can style it as necessary.

.tab li {
    background-color: white;
}

.tab li.selected {
    background-color: red;
}