javascript - 如何在元素时更改元素的类答案

【问题标题】：how to change the class of an element in javascript when an elementjavascript - 如何在元素时更改元素的类
【发布时间】：2014-01-03 15:08:39
【问题描述】：

我正在尝试为带有滑动 jquery 面板的网页制作导航栏。我希望在单击按钮时出现一个小三角形，并且与上一页对应的按钮下方的箭头消失。

我的 HTML 是：

<div id="navbar">
    <div id="navbar_div">
        <div class="navbar_container">
            <ul id="nav" class="sf-menu">
                <li class="bttn1 clicked" class="bttn1"><a href="#item1" class="panel" onclick="bttn1click ()">Home<span class="subheading">Welcome to our page!</span></a></li>
                <li class="bttn2 notclicked"><a href="#item2" class="panel" onclick="bttn2click ()">About Us<span class="subheading">About the website and what it does</span></a></li>
            </ul>
        </div>
    </div>
</div>

我的 CSS 是：

#nav > li.clicked {
    background: url(../images/menu-arrow.png) no-repeat center bottom;
}

我的脚本在按钮 2 点击的页面头部是：

function bttn2click () {
    $("li.clicked").removeclass("clicked");
    $("li.bttn2").addclass('clicked');
    $("li.bttn2").removeclass("notclicked");
}

我不知道我要做什么。当我单击按钮时，没有任何反应（除了链接）我的目标是更改类以匹配单击的 css 类，但它似乎不起作用！

【问题讨论】：

标签： javascript jquery html css navbar

【解决方案1】：

addClass 和 removeClass 区分大小写。 jQuery 没有 addclass 或 removeclass 函数。

【讨论】：

【解决方案2】：

使用 jQuery 事件处理程序

<li class="bttn1 clicked" class="bttn1"><a href="#item1" class="panel">Home<span class="subheading">Welcome to our page!</span></a></li>

然后

jQuery(function () {
    $('#nav li').click(function () {
        $("#nav li.clicked").removeClass("clicked");
        $(this).addClass('clicked').removeClass("notclicked");
    })
})

为什么你的不工作，因为bttn2click 不知道点击了哪个li（以及方法名称的问题）

演示：Fiddle

【讨论】：