0

我正在尝试创建一个函数来更改一系列 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我指的项目是页面左侧的黑点。

4

2 回答 2

3

首先，您应该使用 jQueryaddClass()方法。您不需要编写自己的（顺便说一下，您的 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) });
});
于 2010-05-12T18:37:05.363 回答
-1

试试这个。

 function addClass(obj)
    {

      $(obj).addClass("Highlight");
    }
于 2010-05-12T18:37:17.420 回答