Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding current class to div on link click
    primarykey
    data
    text
    <p>What is the best way to add current class to the .navimg divs (next to li) when their parent link is clicked?</p> <p>HTML:</p> <pre><code>&lt;div id="navbox"&gt; &lt;ul id="navigation"&gt; &lt;li id="home"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt; &lt;div id="imghome" class="navimg current"&gt;&lt;/div&gt; &lt;li id="corp_gov"&gt;&lt;a href="#"&gt;CORPORATE &lt;br /&gt; GOVERNANCE&lt;/a&gt;&lt;/li&gt; &lt;div id="imggov" class="navimg"&gt;&lt;/div&gt; &lt;li id="board"&gt;&lt;a href="#"&gt;BOARD &amp;amp; &lt;br /&gt; DIRECTORS&lt;/a&gt;&lt;/li&gt; &lt;div id="imgboard" class="navimg"&gt;&lt;/div&gt; &lt;li id="permit"&gt;&lt;a href="#"&gt;PERMIT &lt;br /&gt; DETAILS&lt;/a&gt;&lt;/li&gt; &lt;div id="imgpermit" class="navimg"&gt;&lt;/div&gt; &lt;li id="corp_dir"&gt;&lt;a href="#"&gt;CORPORATE &lt;br /&gt; DIRECTORY&lt;/a&gt;&lt;/li&gt; &lt;div id="imgdir" class="navimg"&gt;&lt;/div&gt; &lt;li id="contact"&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt; &lt;div id="imgcontact" class="navimg"&gt;&lt;/div&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I have tried to use this that I found in another Question on here using a bunch of variations but it isn't working right now:</p> <p>jQuery</p> <pre><code>$(document).ready(function() { $("#navbox ul li a").click(function(e) { $(".current").removeClass("current"); $(this).nextAll("div.navimg").first().addClass("current"); }); </code></pre> <p>Is this the best method to use or what would you suggest? Do I have to make a new function for each link or can one like this work for all of them?</p> <p>I tried this as well to try and target each link specifically but that didn't work either:</p> <pre><code>$("li#home a").click(function(e) { $(".current").removeClass("current"); $("#imghome").addClass("current"); </code></pre> <p>Thanks everyone</p> <p>EDIT: I made a jsFiddle showing what is going on: <a href="http://jsfiddle.net/Amp3rsand/vGTpW/2/" rel="nofollow">http://jsfiddle.net/Amp3rsand/vGTpW/2/</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.
 

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