ta切换是在前端中非常常见的一种效果,网上的效果很多。但是我觉得下面这种方法最好,把tab效果封装成一个函数 tabs,这个函数要配合jq使用。

var tabs = function (tab, con) {
tab.click(function () {
var index = tab.index(this);
tab.removeClass('active');
$(this).addClass('active');
con.hide();
con.eq(index).show();
})
}; 下面是调用这个函数。
tabs($("#tab-li li"), $('#tab-content .main'));

函数里面的active是tab导航栏中需要变话的样式。

jq 版的tab切换的更多相关文章

  1. jq 折面板+tab切换(自己封装的插件哦!!)

    如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...

  2. jq封装的tab切换

    function tab(a,b,c){ $(a).on(c,function(){ $(this).addClass('active').siblings().removeClass('active ...

  3. js或者jq的tab切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. js鼠标点击版tab切换

    代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除 <!DOCTYPE html> <head> <meta http-equiv="Conte ...

  5. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. tab切换-2016.6.4

    以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...

  7. JavaScript学习笔记2之Tab切换

    1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...

  8. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  9. tab切换的效果——仿照今日头条APP的切换效果

    说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...

随机推荐

  1. UVa 12118 检查员的难题(dfs+欧拉回路)

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  2. mysql 索引查询的问题

    之前碰到过一个问题,本来数据量不大的一张表,查询结果反应特别慢,不知道是什么原因. 后来才得知,查询的反应速度与结果集大小有关.  结果集越小反应速度越快.

  3. 《C专家编程》第一章——C:穿越时空的迷雾

    这一章讲的是C语言的发展史,包括它是多么不经意的诞生,而后又经历了早期C.K&C.ANSI C的各种阶段,直到它现在形成的这个样子.C语言从来不是一门完美的语言,所以它一直在发展,直到今日,它 ...

  4. hiho一下20周 线段树的区间修改

    线段树的区间修改 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 对于小Ho表现出的对线段树的理解,小Hi表示挺满意的,但是满意就够了么?于是小Hi将问题改了改,又出给了 ...

  5. CE 定时器

    //头文件: afx_msg void OnTimer(UINT_PTR nIDEvent); //声明定时器响应函数 //代码文件: #define TIMER 1 #define TIMEROUT ...

  6. 之前想搞一个nim但因为是自用我会持续修复完善

    异步方式的优点:客户端和服务端互相解耦,双方可以不产生依赖.缺点是:由于引入了消息中间件,在编程的时候会增加难度系数.此外,消息中间件的可靠性.容错性.健壮性往往成为这类架构的决定性因素. 幸运的是程 ...

  7. 安卓开发学习历程1——《第一行代码》coolweather项目setOnItemClickListener函数,Sql语句修改对模拟app程序机影响

    今天,将<第一行代码>最后实战的coolweather项目,认真做了一遍. 今晚,在书中第一阶段开发代码认眞在Android studio敲完,发现setOnItemClickListen ...

  8. go语言的命令行库

    命令行应用通常很小,程序猿们也不喜欢为它编写注释.所以一些额外的工作,如解析参数有个合理的库来帮忙做就好了.https://github.com/urfave/cli 这个项目因此而生.安装:go g ...

  9. C# 隐式类型转换

    implicit(C# 参考) implicit 关键字用于声明隐式的用户定义类型转换运算符.如果可以确保转换过程不会造成数据丢失,则可使用该关键字在用户定义类型和其他类型之间进行隐式转换. clas ...

  10. 微信Android客户端架构演进之路

    这是一个典型的Android应用在从小到大的成长过程中的“踩坑”与“填坑”的历史.互联网的变化速度如此之快,1年的时间里,可以发生翻天覆地的变化.今天在这里,重新和大家回顾微信客户端架构的演进过程,以 ...