I have created a menu bar using the following HTML code:
<ul id="menu-bar">
<li class="active"><a href="/" id="home">Home</a></li>
<li><a href="/Club/" id="club">Club Quarter</a></li>
<li><a href="/Match/" id="match">Match Quarter</a></li>
<li><a href="/History/" id="history">History Quarter</a></li>
</ul>
This menu bar has a red background, with the active item's background appearing in blue.
My jQuery script removes the active class from the current selected item and adds it to the newly clicked item. Here is the code snippet:
$('#menu-bar > li').click(function () {
$('li.active').removeClass('active');
$(this).addClass('active');
});
However, when I single click on a new item, sometimes the background briefly changes colors before reverting back to the original state. In other instances, nothing appears to happen visually even though the page does redirect correctly.
On double clicking an item, the expected color change occurs, but often the "class=active" attribute remains attached to the default first item, despite its background being red instead of blue.
- Why does a single click not always produce the desired effect?
- In the case of a double click, how can the default item remain red while still being classified as active?