微也的博客

生命不息,学习不止

前端之实现Tab下条效果

改变点击Tab一栏状态改变的方法有很多种,在这里介绍其中比较简单基础的一个方法。

首先要了解removeClass,addClass概念,以及jquery index() 方法

编辑下条的style样式:

.nav-line {
border-bottom: 5px solid #EC6767;
}

1. 使用函数,如 $("nav li").click(function(obj){ };

2.将导航栏的其他效果去掉,如$("nav li").removeClass("nav-line");

3.获取点击区域的位置,如var n = $(this).index();

4.然后向其添加下条样式,如$("nav li").eq(n).addClass("nav-line");

最后便可成功实现,同理也可以实现多处点击改变状态的事件了,主要代码如下:

$(document).ready(function(){
$("nav li").click(function(obj){
$("nav li").removeClass("nav-line");
var n = $(this).index();
$("nav li").eq(n).addClass("nav-line");
});

}

PS:其中也可以添加hover属性,使导航栏效果更佳,若有更好方法,敬请指导!

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/anmoran/article/details/46821457
文章标签: 前端 jquery
个人分类: jquery
想对作者说点什么? 我来说一句

前端各种Tab效果

2018年01月16日 35KB 下载

没有更多推荐了,返回首页

不良信息举报

前端之实现Tab下条效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭