StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You should bind the event handler to all of the elements and then inside that event handler, check to see if the current element being clicked has the <code>selected</code> class:</p> <pre><code>$(function () { //bind a click event handler to all of the menu items that: //1. removes the `selected` class from the element that currently has it //2. applies that class to the element clicked //3. removes the `highlighted` class from the current element since it will have it, due to the fact that you have to hover over an element to click it $('#option_wrapper').children().on('click', function () { $(this).siblings('.selected').removeClass('selected').end().removeClass('highlighted').addClass('selected'); //bind a mouseenter event handler to the menu items that updates the currently moused-over element only if it doesn't have the `selected` class }).on('mouseenter', function () { //notice the `!` here, so we are checking for the non-existence of the class in question if (!$(this).hasClass('selected')) { $(this).addClass('highlighted'); } //bind a mouseleave event handler to the menu items that removes the `highlighted` class }).on('mouseleave', function () { $(this).removeClass('highlighted'); }); }); </code></pre> <p>Here is a demo: <a href="http://jsfiddle.net/g8W4z/" rel="nofollow">http://jsfiddle.net/g8W4z/</a></p> <p>Some documentation:</p> <ul> <li><code>.hasClass()</code>: <a href="http://api.jquery.com/hasclass" rel="nofollow">http://api.jquery.com/hasclass</a></li> <li><code>.siblings()</code>: <a href="http://api.jquery.com/siblings" rel="nofollow">http://api.jquery.com/siblings</a></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload