导航栏a标签点击后下划线不隐藏怎么弄？

Question

使导航栏中 第一个a标签 默认有下划线，
当鼠标划过别的导航的时候，下划线会换到别的导航下，
当鼠标点击后，只有点击的那个a标签有下划线，
直到点击下一次的时候，下划线换到下一个被点击的a标签

Answer 1

给导航上的a标签单独写个类，比如叫line，

a{text-decoration: none;}
a.line{text-decoration: underline;}

通过js的on("hover",...)和click事件控制 line 这个类，addClass和removeClass,就可以实现了，默认加的就是初始化时候给第一个添加 line 就行

$(document).ready(function(){
        var ind = 0;//记录被点击的导航标签次序
        $(".nav a").eq(ind).addClass("line");//初始化时候添加首项下划线
    $(".nav a").click(function(){
            ind = $(this).index();
            $(this).addClass("line").siblings().removeClass("line");
    });
    $(".nav a").on("hover",function(){
            $(this).addClass("line").siblings().removeClass("line");
    },function(){
            $(".nav a").eq(ind).addClass("line").siblings().removeClass("line");
    });
});

不过这样比较麻烦，一般我直接会在CSS中写

a:hover{text-decoration: underline;}

区别只是鼠标经过时点击聚焦的导航也存在下划线，方法却简单好多：

$(document).ready(function(){
        $(".nav a").eq(0).addClass("line");//初始化时候添加首项下划线
    $(".nav a").click(function(){
            $(this).addClass("line").siblings().removeClass("line");
    });
});