如何激活类onclick列表项

I am facing a problem in which i want to add class onclick means the clicked should add class. see my image 如何激活类onclick列表项

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

i am doing this by jquery as:

我通过jquery这样做:

$(function() {

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

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

});

});

and my css is:

我的css是:

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

and my submenu code is:

我的子菜单代码是:

<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>

i realy Have spent so many hour but did not sort out this...by this it is working but when i leave click onmouse then the added class got remove... any suggestion would be highly responsive...thanxxx

我真的花了这么多时间,但没有理清这个...这是有效但当我离开点击onmouse然后添加的类被删除...任何建议将高度响应... thanxxx

2 个解决方案

#1

Use that instead:

使用它代替:

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);
    });

});

Corresponding CSS for your jsfiddle:

jsfiddle的相应CSS:

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

Problem is then, anchor tags won't redirect to corresponding page, but i don't know what you are looking for exactly.

问题是,锚标签不会重定向到相应的页面,但我不知道你正在寻找什么。

#2

Change .aside ul li.submenu-active a to li.submenu-active a

将.aside ul li.submenu-active a更改为li.submenu-active a

See demo.

#1