Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Step 1: Getting the correct link element</strong></p> <p>First you need to locate the correct <code>a</code> tag element, you can do that with the following <a href="http://api.jquery.com/attribute-equals-selector/" rel="nofollow">attribute selector</a>:</p> <pre><code>var href = "foo.html"; var a = $("[href='" + href + "']"); </code></pre> <hr> <p><strong>Step 2: Getting the parent list item element</strong></p> <p>Then you can find the direct parent using the <a href="http://api.jquery.com/parent/" rel="nofollow"><code>parent()</code></a> function:</p> <pre><code>var li = a.parent(); </code></pre> <p>If it is not a direct parent, you can use the <a href="http://api.jquery.com/closest/" rel="nofollow"><code>closest()</code></a> function which will allow you to find the first ancestor that matches the supplied selector. For example:</p> <pre><code>var li = a.closest("li"); </code></pre> <hr> <p><strong>Step 3: Changing the class</strong></p> <p>Finally, you can add a class to any given element using the <a href="http://api.jquery.com/addClass/" rel="nofollow"><code>addClass()</code></a> function:</p> <pre><code>li.addClass("active"); </code></pre> <p>if you need to remove the class at any point, or remove an existing class, you can use the <a href="http://api.jquery.com/removeClass/" rel="nofollow"><code>removeClass()</code></a> function:</p> <pre><code>li.removeClass("active"); </code></pre> <p>NOTE: If you want to 'reset' all active list elements, you can easily do the following:</p> <pre><code>$("li.active").removeClass("active"); </code></pre> <hr> <p><strong>The end result</strong></p> <p><a href="http://jsfiddle.net/9fKqH/" rel="nofollow">Here is a working example in action</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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