导航栏在当前页面可以显示下面的横杠是怎么写的呢？

Question

鼠标在经过导航栏的对应栏目，栏目下面显示一个小小的横杠，这个可以用hover和display:none；
但是如果需要他点击栏目后，在对应栏目下方还显示横杠的话是需要怎么写代码呢？需要获取当前网页地址吗？然后再对应栏目显示横杠？

Answer 1

定义一个class 通过尾类来显示 之后通过js来控制给当前点击的栏目加上这个class同时移除掉其他栏目的这个class就行了
例子：创建 一个class active
其样式如下：

    .active:after{
        content:"";
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:3px;
        background:orange;
    }

js代码如下:

var doms = $("ul>li"); // dom集合
            doms.click(function (e) {
                    $.makeArray(doms).forEach(function (v, i) {
                            $(v).removeClass("active");
                    })
                    $(e.target).addClass("active");
            })