前端之实现Tab下条效果

原创 2015年07月09日 20:42:45

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

ajax实例:如何使用json+ajax的方法实现类似前端特效tab切换效果

需求:  使用json+ajax的方法代替类似tab功能的效果,传统的tab需要从数据表一次性读取多条数据并全部置于页面上,而json+ajax 通过ajax访问后台方法可实时获取数据单条。最近实现了...

前端开发--TAB标签效果实现

知识基础: *  这东西叫“通配符”用来匹配页面上所有元素。 *{margin:0;padding:0;} 对应的是页面上所有元素 定义和用法 标签定义无序列表。 标签定义列表项...

TabLayout实现仿今日头条顶部tab导航效果

今日头条的顶部tab导航效果的实现,我们一般会用RadioGroup+Fragment+ViewPager来实现,适配器繁多,代码量大,今天我们来介绍TabLayout的使用。TabLayout为An...

TabLayout轻松实现仿今日头条顶部tab导航效果

前言 自android5.0出来后,谷歌使用了Material Design设计风格,随着带来了许多新的控件,如:SnackBar,TextinputLayout,以及今天使用的TabLayout,这...
  • ydxlt
  • ydxlt
  • 2015年12月14日 13:56
  • 3280

Fragment、ViewPager、ActionBar实现TAB导航条效果

前言:         制作Tab书签导航条(书签选项卡)有多种方法: 【特别提示:】注意几种创建Tab书签导航中Fragment生命周期的变化。 1、TabActivity+TabHost(已...

VP实现tab效果

  • 2013年09月10日 14:21
  • 1.53MB
  • 下载

Ajax实现页面Tab效果

  • 2010年05月11日 16:47
  • 3KB
  • 下载

纯JS实现的简单tab选项卡切换效果

本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。 Tab效果 ul{ list-style: none; } *{...

使用ViewPager来实现Tab效果

  • 2015年07月25日 11:26
  • 1.51MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端之实现Tab下条效果
举报原因:
原因补充:

(最多只允许输入30个字)