Question

我有一个独特的全局导航，用于垂直视差页面和静态子页面等。

我想添加活跃状态。 border-bottom: 2px solid red;和padding-bottom: 26px;

我已使用以下代码成功将它们添加到click功能。虽然我觉得它有点笨拙。

$(function(){
    $('.navbar-default .navbar-nav > li > a').click(function () {
        $('.navbar-default .navbar-nav > li > a').css('text-decoration', 'none');
     $(this).css('border-bottom', '2px solid red');
     $(this).css('padding-bottom', '26px');
     });
 });

问题：

单击一个导航项后，将显示活动状态，但之后单击另一个项目仍然显示上一次单击的上一个活动状态。单击新导航项后，我需要删除先前绑定的css或激活状态。有什么建议吗？

Answer 1

不使用内联样式（jquery .css()），而是使用样式创建一个CSS类
使用jQuery的addClass()和removeClass() - 与适当的选择器。

首先从全部删除它，然后将其添加到活动的。

Answer 2

这是一支用于改变课程的笔 http://codepen.io/easingthemes/pen/gbgevd

内联CSS（不推荐）

$(function(){
    $('.navbar-default .navbar-nav > li > a').click(function () {
        $('.navbar-default .navbar-nav > li > a').css({
            textDecoration: 'underline',
            borderBottom: 'none',
            paddingBottom: 'none'
        })
        $(this).css({
            textDecoration: 'none',
            borderBottom: '2px solid red',
            paddingBottom: '26px'
        });

    });
});

JS切换课程（推荐）

$(function(){
    $('.navbar-default .navbar-nav > li > a').click(function () {
        $('.navbar-default .navbar-nav > li > a').removeClass('.active');
        $(this).addClass('.active');
     });
 });

CSS

.active {
    text-decoration: none;
    border-bottom: 2px solid red;
    padding-bottom: 26px;
}

根据点击次数为nav编写活动状态

2 个答案: