javascript - 如何激活类 onclick 列表项

Question

我面临一个问题，我想添加类 onclick 意味着被点击的应该添加类。看我的形象

我通过 jquery 这样做:

$(function() {

$('.box li').click(function(){
    $('.box li').removeClass('submenu-active');

    $(this).addClass('submenu-active');

});

});

我的 CSS 是:

.aside ul li.submenu-active a {background-color:#df0000; color:#fff;}

我的子菜单代码是:

<ul class="box">
                <li class="submenu-active"><a href="create_financial_year.php">Create Financial Year</a></li>
                <li ><a href="select_financial_year.php">Select Financial Year</a></li>
                <li><a href="account_master.php">Account Master</a></li>
                <li><a href="bank_account_master.php">Bank Account Master</a></li> <!-- Active -->                  
                <li><a href="subscription_master.php">Subscription Master</a></li>
                <li><a href="subscription_fee_master.php">Subscription Fee Master</a></li>
                <li><a href="member_master.php">Member Master</a></li>                
                <li><a href="membership_suspension.php">Membership Suspension</a></li>
            </ul>

我真的花了很多时间但没有解决这个问题......通过这个它正在工作但是当我离开时点击鼠标然后添加的类被删除......任何建议都会非常敏感......thanxxx

Answer 1

改用它:

DEMO

$(function () {

    $('.box li a').click(function (e) {
        e.preventDefault();
        $(this).closest('li').addClass('submenu-active').siblings().removeClass('submenu-active');
        //to load new content using ajax
        //you could wish to show user, some content is loading
        $('#myContainer').html('<img src="loading.gif>').load(this.href);
    });

});

您的 jsfiddle 的相应 CSS:

ul.box li.submenu-active {
    background-color:#df0000;
    color:#fff;
}

问题是， anchor 标签不会重定向到相应的页面，但我不知道你到底在找什么。