jquery - 无序列表项以编程方式给出时无法保留课程

Question

我的问题是我试图在单击项目时更改 li 项目的类。我成功了，但问题是 li 项目被赋予了课程，但它无法保留课程。

我的html和jquery是这样的

    $(document).ready(function () {        

            //On Click Event
            $("ul.tabs li").click(function () {

            $("ul.tabs li").removeclass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab                     

        });
    });

</script>

<div class="menu_nav">
     <ul class="tabs">
        <li><a href="default.aspx"><span>Home Page</span></a></li>
        <li><a href="support.aspx"><span>Support</span></a></li>
        <li><a href="aboutus.aspx"><span>About Us</span></a></li>
        <li><a href="services.aspx"><span>Services</span></a></li>
        <li><a href="contactus.aspx"><span>Contact Us</span></a></li>
    </ul>
</div>

Answer 1

$("ul.tabs li").addClass("active"); //删除任何“活动”类

您在上面的语句中添加类，您需要使用removeClass()方法而不是添加类

现场演示

$("ul.tabs li").removeClass("active"); //this will remove active class from all tabs
$(this).addClass("active"); //Add "active" class to selected tab

Answer 2

您的代码是正确的，但这里有一个错字：

$("ul.tabs li").removeclass("active");
             //   ----^----------------make "c" in caps "C"

并确保阻止链接的默认行为，否则您会刷新页面。

$("ul.tabs li").click(function (e) {
   e.preventDefault();
   // then all your code stuff here