Создание функции JavaScript для коммутации классов между элементами списка в зависимости от того, какой из них нажал

Question

Я пытаюсь создать функцию для изменения класса на серии из 5 элементов списка в зависимости от которых нажал. Цель состоит в том, чтобы изменить стиль элемента в зависимости от того, какой из них является текущим элементом.

Я пробовал что-то вроде этого:

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

а затем добавил это к моим элементам:

 onclick="addClass(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>

Когда элемент нажат на изменения URL, может быть, это может быть способ настроить функцию для изменения классов в зависимости от URL? Я очень новый с JavaScript любыми идеями о том, как заставить эту работу будет очень ценится.

Текущий способ, которым я его кодировал, это изменить каждый элемент, когда зависел, но я хотел бы, чтобы изменения остались, пока нажат другой элемент. Сможете увидеть здесь: http://perksconsulting.com/dev/capabilties.php. Предметы, которые я имею в виду, - это черные точки на левой части страницы.

Answer 1

Во-первых, вы должны использовать jQuery addClass() метод. Вам не нужно писать свои собственные (ваша добавление AddClass (), кстати).

Попробуй это:

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

Потом:

    <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>

Или еще лучше, держите свой HTML чистый и позвольте jQuery упростить вещи:

    <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>

Тогда, где-то на вашей странице:

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

Answer 2

Попробуй это.

 function addClass(obj)
    {

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