关闭

前端之实现Tab下条效果

标签: 前端jquery
217人阅读 评论(0) 收藏 举报
分类:

改变点击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属性,使导航栏效果更佳,若有更好方法,敬请指导!

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:22226次
    • 积分:578
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:9篇
    • 译文:0篇
    • 评论:19条
    最新评论