Write jQuery code to highlight the clicked list item

Description: When you click a list item it must get the class active, and the other items must lose it.

Hint:

• Use $(this), .addClass() and .siblings().removeClass().

---

HTML of the page

<ul id="menu">
  <li class="active">Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Solution

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

$('#menu li').eq(2).click();   // click on "Contact"

How it works

• $(this) is the clicked item. siblings() are the other items of the same list.
• After the click on Contact, only that item has the class active.

Read CSS Classes and Siblings.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.