鼠标在经过导航栏的对应栏目,栏目下面显示一个小小的横杠,这个可以用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添加样式