创建javascript函数，根据单击的元素在列表元素之间切换类

我正在尝试创建一个函数来更改一系列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非常熟悉，如果您有任何关于如何使用javascript的想法，我将不胜感激

---

我目前的编码方式是在鼠标悬停时更改每个项目，但我希望在单击其他项目之前保持更改。可以在这里查看：我指的是页面左侧的黑点。

首先，应该使用jQuery

addClass（）

方法。您不需要编写自己的（顺便说一句，您的addClass（）实现有缺陷）

试试这个：

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

然后：

试试这个

 function addClass(obj)
    {

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

---

这是一个很好的解决方案，但与其将其作为一个函数，为什么不直接使用$（'a'）。单击以执行此操作？另外，@Jason您的onclick在第一项中位于锚定标签内，但在其余项中位于li标签上。这只是一个打字错误，还是有意的？如果是有意的，你应该使它们与锚或li标签上的所有标签保持一致。这就是我需要的！谢谢Ryan那是个打字错误，不过谢谢你指出。另一个简单的问题。当我的css在safari和chrome中运行良好时，你知道为什么它会在firefox中崩溃吗？再次感谢您的帮助我认为您应该重新复制您的代码：@aSeptik-lol，是的，这看起来就是Jason获得代码的地方。@Jason-您的css被破坏的原因可能很多。也许最好在上面贴一个不同的问题。无效的HTML。应该是

ul>li>a

。您可以设置

显示：块a

上使用code>css样式，以使其占据

li

的全部大小。您在哪里见过这样的代码<代码>这是毫无意义的。您只需调用$（obj）.addClass（“Highlight”）。

    <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) });
});

 function addClass(obj)
    {

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