jq TAB切换
<a href="http://www.w3.org/1999/xhtml">" target="_blank">http://www.w3.org/1999/xhtml"></a> <meta charset="utf-8"></meta charset="utf-8"> <title>垂直外边距合并</title> <style></style> h1{ display:inline-block; width:80px; } .active{ border:1px solid green; } .content{ display:none; } .content.active{ display:block; } <h1 class="active">TAB1</h1 class="active"> <h1>TAB2</h1> <h1>TAB3</h1> <div class="con"></div class="con"> <div class="content active"></div class="content active"> 这里是一的内容 <div class="content"></div class="content"> 这里是二的内容 <div class="content"></div class="content"> 这里是三的内容 <script src="js jquery-1.10.2.min.js"=""></script src="js> <script></script> $('h1').click(function(){ var index = $(this).index(); $('.content').eq(index).show().addClass('active').siblings().removeClass('active').hide(); });用index来识别点击的下标也就是点击的第几个,得到的是个数字,然后使用eq把这个index数字穿进去,这样就和你点击的一一对应,相当于绑定,show addClass什么的就不用说了,siblings是表示除了你选中也就是点中的其他的,比如div,选择了除了你点中的所有的div,相当于取反,然后在设置另一个样式或者去除class。上面的“h1”也可以同样的设置样式。
jq TAB切换的更多相关文章
- js或者jq的tab切换
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- jq 折面板+tab切换(自己封装的插件哦!!)
如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- tab切换-2016.6.4
以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...
- 【原】react做tab切换的几种方式
最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...
- tab切换的效果——仿照今日头条APP的切换效果
说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...
- 关于scrollintoview()真的是有意思极了,结合普通tab切换一起看看
scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- jQuery的DOM操作实例(1)——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
随机推荐
- pyinstaller加密打包
pyinstaller -F -w --key=keys --clean --icon=imgs/xxx.ico xxx.py
- eclipse 创建Makefile工程生成多个执行文件
1.创建Makefile工程 2.创建inc src Debug 目录 用于存放头文件源文件 3.编写Makefile 需要在有源文件的目标天剑Makefile文件,如下给出一个生成两个target的 ...
- hbase1.2.6完全分布式安装
环境,参考之前的两篇博文: jdk1.7 hadoop2.6.0 完全分布式 一个master,slave1,slave2,slave3 zookeeper3.4.6 完全分布式 安装与配置:(以下步 ...
- lintcode-128-哈希函数
128-哈希函数 在数据结构中,哈希函数是用来将一个字符串(或任何其他类型)转化为小于哈希表大小且大于等于零的整数.一个好的哈希函数可以尽可能少地产生冲突.一种广泛使用的哈希函数算法是使用数值33,假 ...
- AtCoder Code Festival 2017 Team Relay J - Indifferent
题目大意:共$2n$个价格$p_i$.两人轮流取.你每次取最大的,对方每次随机取.问你取的期望和是多少. 题解:从小到大排序,$\sum\limits_{i=0}^{2n-1} \frac{i*p_i ...
- BZOJ 1101 [POI2007]Zap | 第一道莫比乌斯反(繁)演(衍)
题目: http://www.lydsy.com/JudgeOnline/problem.php?id=1101 题解: http://www.cnblogs.com/mrha/p/8203612.h ...
- [AHOI2005]航线规划——LCT维护边双联通分量
因为只能支持加入一个边维护边双,所以时光倒流 维护好边双,每次就是提取出(x,y)的链,答案就是链长度-1 具体维护边双的话, void access(int x){ for(reg y=0;x;y= ...
- JQuery拖拽改变元素的尺寸
"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...
- MySQL使用笔记(六)条件数据记录查询
By francis_hao Dec 17,2016 条件数据记录查询 mysql> select field1,field2-- from table_name where 条件; 其中 ...
- POJ3169:Layout(差分约束)
Layout Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 15705 Accepted: 7551 题目链接:http ...