Databases
StackOverflow2013
Postsdbo
POCreating a javascript function to switch classes between list elements depending on which one has been clicked
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating a javascript function to switch classes between list elements depending on which one has been clicked
    text
    copied!<p>I am trying to create a function to change the class on a series of 5 list elements depending on which has been clicked. The goal is to change the style of the element depending on which one is the current element.</p> <p>I had tried something like this:</p> <pre><code>function addClass(obj) { obj.className="highlight"; } </code></pre> <p>and then added this to my elements:</p> <pre><code> onclick="addClass(this); </code></pre> <p>but this only added the class to the first element in the list and then did not remove the class when a different one was clicked.</p> <p>My list elements look like this: </p> <pre><code> &lt;ul id="circularMenu"&gt; &lt;a href="#strategy" onclick="addClass(this);"&gt;&lt;li id="strategy_link"&gt;&lt;h3&gt;Strategy&lt;/h3&gt;&lt;/li&gt;&lt;/a&gt; &lt;a href="#branding"&gt;&lt;li id="branding_link" onclick="addClass(this);"&gt;&lt;h3&gt;Branding&lt;/h3&gt;&lt;/li&gt;&lt;/a&gt; &lt;a href="#marketing"&gt;&lt;li id="marketing_link" onclick="addClass(this);"&gt;&lt;h3&gt;Marketing&lt;/h3&gt;&lt;/li&gt;&lt;/a&gt; &lt;a href="#media"&gt;&lt;li id="media_link" onclick="addClass(this);"&gt;&lt;h3&gt;Media&lt;/h3&gt;&lt;/li&gt;&lt;/a&gt; &lt;a href="#management"&gt; &lt;li id="management_link" onclick="addClass(this);"&gt;&lt;h3&gt;Management&lt;/h3&gt;&lt;/li&gt;&lt;/a&gt; &lt;/ul&gt; </code></pre> <p>When an item is clicked the url changes, maybe this could be the way to set up the function to change classes depending on the url? I am very new with javascript any ideas on how to make this work would be greatly appreciated.</p> <p>The current way I have it coded is to change each item when hovered, but I would like the change to remain until a different item is clicked. It can be viewed here: <a href="http://perksconsulting.com/dev/capabilties.php" rel="nofollow noreferrer">http://perksconsulting.com/dev/capabilties.php</a> The items I am referring to are the black dots on the left side of the page.</p>
 

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