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

图片说明

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

定义一个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");
            })

网址中带参数,然后获取参数,与当前的对比,如果是则显示

最简单的写法,在当前点击的样式里加一个css属性 border:1px solid orange;就好了

可以在hover和click都addClass添加样式