Question

我在这里和jQuery相当新，但我已经在stackoverflow中搜索了相关问题，但没有一个能解决我的问题。我有这段代码：

HTML：

<div class="menu">
    <div class="menu-items">
       <ul class="nav">
         <li class="var_nav">
            <a href="../home.php">Home</a>
         </li>
         <li class="var_nav">
            <a href="../portfolio.php">Porfolio</a>
         </li>
         <li class="var_nav">
            <a href="../dashboard.php">Dashboard</a>
         </li>
         <li class="var_nav">
            <a href="../users.php">Users</a>
         </li>
       </ul>
    </div>
</div>

CSS

.nav li.active {
    background-color: #048abb;
}
.nav li.active a {
    color: #fff;
}

我想将class .active应用于单击的（当前/活动）链接，以便css生效。关于如何通过jQuery应用类来修改html代码的任何建议？

Answer 1

var $links = $('.nav a').on('click', function(e) {
    e.preventDefault();

    $links.removeClass('active');
    $(this).addClass('active');
});

Answer 2

$(document).ready(function(){
    $('.nav').on('click', 'a', function(e) {
        e.preventDefault();
        $('.active).removeClass('active');
        $(this).addClass('active');
    });
});

Answer 3

因为CSS似乎解决了＆＃34;活跃＆＃34;要应用于LI元素的类，这应该可以解决问题：

$(document).ready(function() {

    $('.nav a').click(function(e) {

    //optional - override the link - uncomment the following line:
    //e.preventDefault();

    //remove the active class from all li elements
    $('.nav li').removeClass('active');

    //add it to the li element holding the clicked link
    $(this).parent('li').addClass('active');

    });

});

通过jQuery添加活动类来链接

3 个答案: