Создание функции javascript для переключения классов между элементами списка в зависимости от того, какой из них был нажат - PullRequest
Новая
       27

Создание функции javascript для переключения классов между элементами списка в зависимости от того, какой из них был нажат

0 голосов
/ 12 мая 2010

Я пытаюсь создать функцию для изменения класса в серии из 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 Пункты, о которых я говорю, - это черные точки на левой стороне страницы.

Ответы [ 2 ]

3 голосов
/ 12 мая 2010

Во-первых, вы должны использовать метод 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) });
});
0 голосов
/ 12 мая 2010

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

 function addClass(obj)
    {

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