Creating a javascript function to switch classes between list elements depending on which one has been clicked.

Question

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.

I had tried something like this:

function addClass(obj)
{
 obj.className="highlight";
}

and then added this to my elements:

 onclick="addClass(this);

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.

My list elements look like this:

     <ul id="circularMenu">

        <a href="#strategy" onclick="addClass(this);"><li id="strategy_link"><h3>Strategy</h3></li></a>
        <a href="#branding"><li id="branding_link" onclick="addClass(this);"><h3>Branding</h3></li></a>
        <a href="#marketing"><li id="marketing_link" onclick="addClass(this);"><h3>Marketing</h3></li></a>
        <a href="#media"><li id="media_link" onclick="addClass(this);"><h3>Media</h3></li></a>
        <a href="#management"> <li id="management_link" onclick="addClass(this);"><h3>Management</h3></li></a>

     </ul>

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.

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: http://perksconsulting.com/dev/capabilties.php The items I am referring to are the black dots on the left side of the page.

Answer 1

First, you should use the jQuery addClass() method. You don't need to write your own (your addClass() implementation is buggy, by the way).

Try this:

function selectInList(obj)
{
    $("#circularMenu").children("a").removeClass("highlight");
    $(obj).addClass("highlight");
}

Then:

    <ul id="circularMenu">
        <a href="#strategy" onclick="selectInList(this);"><li id="strategy_link"><h3>Strategy</h3></li></a>
        <a href="#branding"><li id="branding_link" onclick="selectInList(this);"><h3>Branding</h3></li></a>
        <a href="#marketing"><li id="marketing_link" onclick="selectInList(this);"><h3>Marketing</h3></li></a>
        <a href="#media"><li id="media_link" onclick="selectInList(this);"><h3>Media</h3></li></a>
        <a href="#management"> <li id="management_link" onclick="selectInList(this);"><h3>Management</h3></li></a>    
     </ul>

Or even better, keep your html clean and let jQuery simplify things:

    <ul id="circularMenu">
        <a href="#strategy"><li id="strategy_link"><h3>Strategy</h3></li></a>
        <a href="#branding"><li id="branding_link"><h3>Branding</h3></li></a>
        <a href="#marketing"><li id="marketing_link"><h3>Marketing</h3></li></a>
        <a href="#media"><li id="media_link"><h3>Media</h3></li></a>
        <a href="#management"><li id="management_link"><h3>Management</h3></li></a>
    </ul>

Then, somewhere in your page:

$(document).ready(function()
{
   $("#circularMenu").children("a").click(function() { selectInList(this) });
});

Answer 2

Try this out.

 function addClass(obj)
    {

      $(obj).addClass("Highlight");
    }