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遍 ...
随机推荐
- CUDA9.0+tensorflow-gpu1.8.0+Python2.7服务器环境搭建经验
最近在实验室的服务器上搭建Tensorflow,CUDA是默认的9.0,管理员已经装好了,同时环境变量都已经配好. 直接用Anaconda创建的虚拟环境,使用pip install tensorflo ...
- UVA 11297 Census(二维线段树)
Description This year, there have been many problems with population calculations, since in some cit ...
- HDU 1028 整数拆分问题 Ignatius and the Princess III
Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- POI实现excel的数据验证
目录 前言 难点1:合并单元格 代码实现策略: step 1: 合并单元格 step 2: 给单元格赋值 难点2:数据验证-下拉框 代码实现策略: step 1:设置需要进行数据验证的单元格范围和可供 ...
- lintcode-124-最长连续序列
124-最长连续序列 给定一个未排序的整数数组,找出最长连续序列的长度. 说明 要求你的算法复杂度为O(n) 样例 给出数组[100, 4, 200, 1, 3, 2],这个最长的连续序列是 [1, ...
- lintcode-74-第一个错误的代码版本
74-第一个错误的代码版本 代码库的版本号是从 1 到 n 的整数.某一天,有人提交了错误版本的代码,因此造成自身及之后版本的代码在单元测试中均出错.请找出第一个错误的版本号. 你可以通过 isBad ...
- nginx1.10.3+php5.6+mysql5.7.0
第一步安装nginx1.10.3 优化nginx的介绍:jemalloc https://ideas.spkcn.com/software/os/linux/577.html 预先安装autoconf ...
- 在浏览器中从FTP下载文件
public static class FTPHelper { /// <summary> /// 得到特定FTP目录的文件列表 /// </summary> /// < ...
- 【Python】PYTHON九九乘法表
python2.7 for i in range(1,10): for j in range(1,i+1): print j,'x',i,'=',j*i,'\t', print '\n'pr ...
- Web.config配置文件中的属性add,key,value含义
这是添加自定义字符串的方式,保存是以键-值的形式保存的,可以通过key获取value,一般用这种方法配置全局内使用的字符串. <configuration>是配置文件的根配置节. < ...