javascript - 创建一个 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>

当单击某个项目时，网址会发生变化，也许这可能是设置函数根据网址更改类的方法？我对 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) });
});