jq 版的tab切换
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切换的更多相关文章
- jq 折面板+tab切换(自己封装的插件哦!!)
如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...
- jq封装的tab切换
function tab(a,b,c){ $(a).on(c,function(){ $(this).addClass('active').siblings().removeClass('active ...
- js或者jq的tab切换
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- js鼠标点击版tab切换
代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除 <!DOCTYPE html> <head> <meta http-equiv="Conte ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- tab切换-2016.6.4
以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...
- JavaScript学习笔记2之Tab切换
1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...
- 【原】react做tab切换的几种方式
最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...
- tab切换的效果——仿照今日头条APP的切换效果
说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...
随机推荐
- pthread_cond_wait()函数的理解(摘录)
/************pthread_cond_wait()的使用方法**********/pthread_mutex_lock(&qlock); /*lock*/pthread_c ...
- 编译c
1.打开vs工具 2.弄到相同路径(同所编译文件) 3.cl(微软编译器) 生成 obj exe文件 4.system是一个通用指令 可以在windows linux mac用
- MFC编程 | tab control控件的使用
因为课程需要,会用到MFC编程,所以讲一些经验总结下,以便日后使用查询. // tab control控件的使用 // 建立一个Cluster窗口,通过tab可以切换成C-Means和Fuzzy C- ...
- [课程设计]Scrum 1.3 多鱼点餐系统开发进度
[课程设计]Scrum 1.3 多鱼点餐系统开发进度 Scrum 1.3 多鱼点餐系统开发进度 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追 ...
- IOS 制作启动画面
启动方式简述 IOS 8 及之前: Launch Images Source方式, IOS8 及之后: 1, Launch Images Source方式 : 2 , LaunchScreen. ...
- 如何对web.config进行加密和解密
http://blog.csdn.net/jf_jifei/article/details/6527390 在WEB网站开发过程中,如果我们将数据库连接字符串封装到.DLL文件中,将会给数据库和程序的 ...
- oracle基础教程(8)oracle修改字符集
oracle基础教程(8)oracle修改字符集 1.用dba连接数据库 -->sqlplus / as sysdba 2.查看字符集 -->SELECT parameter, value ...
- 批处理定时重启print打印服务,解决打印机异常队列堆积
公司有台打印机,由于是公用的,经常出现一个较大的文档卡在队列里面,导致队列后面的打印无法被执行,人工去清理岂不是太费事了,下面分享一个批处理文件 @echo off echo 计划任务开始执行 3 e ...
- Visual Studio Team System 2008 Team Suite(90 天试用版)
安装完成后,在“控制面板”中启动“添加删除程序”,选中Vs2008,点击“更改.删除”,输入序列号:PYHYP-WXB3B-B2CCM-V9DX9-VDY8T
- [转载]jQuery1.9完全删除live事件
其实关于live被删除的事件早就在1.7.2版本以后就有通知过了 不过在官方一直提倡使用.on代替.live的过程中 .live事件一直沿用 今天更新了 看下jQuery1.9的相关信息 发现api中 ...