Generate <li> with custom class using jQuery

Question

I am looking for a solution to do the following:

I have two links in a list:

<ul>
     <li class="1"><a>Option #1</a><li>
     <li class="2"><a>Option #2</a><li>
</ul>

When I click on a link, I want class to change to "selected", for example, I clicked "Option #1":

<ul>
     <li class="1 selected"><a>Option #1</a><li>
     <li class="2"><a>Option #2</a><li>
</ul>

The solution in jQuery is not necessary, but I guess jQuery is the right tool to do this?

Kindly help.

Resolution · Accepted Answer · 2015-01-07 01:40:19Z

2

You can do:

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

You also need to close <li> using </li> instead of <li> to make your HTML markup valid.

answered Jan 7, 2015 at 1:40

Resolution

7791 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Florian Schöffl · Accepted Answer · 2015-01-07 01:43:15Z

0

You can use the jQuery addClass and removeClass functions, or if you want to save you some time the toggleClass

answered Jan 7, 2015 at 1:43

Florian Schöffl

4994 silver badges12 bronze badges