Question

我正在尝试使用滑动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类，但它似乎不起作用！

Answer 1

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

Answer 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

如何在元素中更改javascript中元素的类

2 个答案: