<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切换的更多相关文章

  1. js或者jq的tab切换

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

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

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

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

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

  4. tab切换-2016.6.4

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

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

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

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

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

  7. 关于scrollintoview()真的是有意思极了,结合普通tab切换一起看看

    scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...

  8. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. jQuery的DOM操作实例(1)——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

随机推荐

  1. pyinstaller加密打包

    pyinstaller -F -w --key=keys --clean --icon=imgs/xxx.ico xxx.py

  2. eclipse 创建Makefile工程生成多个执行文件

    1.创建Makefile工程 2.创建inc src Debug 目录 用于存放头文件源文件 3.编写Makefile 需要在有源文件的目标天剑Makefile文件,如下给出一个生成两个target的 ...

  3. hbase1.2.6完全分布式安装

    环境,参考之前的两篇博文: jdk1.7 hadoop2.6.0 完全分布式 一个master,slave1,slave2,slave3 zookeeper3.4.6 完全分布式 安装与配置:(以下步 ...

  4. lintcode-128-哈希函数

    128-哈希函数 在数据结构中,哈希函数是用来将一个字符串(或任何其他类型)转化为小于哈希表大小且大于等于零的整数.一个好的哈希函数可以尽可能少地产生冲突.一种广泛使用的哈希函数算法是使用数值33,假 ...

  5. AtCoder Code Festival 2017 Team Relay J - Indifferent

    题目大意:共$2n$个价格$p_i$.两人轮流取.你每次取最大的,对方每次随机取.问你取的期望和是多少. 题解:从小到大排序,$\sum\limits_{i=0}^{2n-1} \frac{i*p_i ...

  6. BZOJ 1101 [POI2007]Zap | 第一道莫比乌斯反(繁)演(衍)

    题目: http://www.lydsy.com/JudgeOnline/problem.php?id=1101 题解: http://www.cnblogs.com/mrha/p/8203612.h ...

  7. [AHOI2005]航线规划——LCT维护边双联通分量

    因为只能支持加入一个边维护边双,所以时光倒流 维护好边双,每次就是提取出(x,y)的链,答案就是链长度-1 具体维护边双的话, void access(int x){ for(reg y=0;x;y= ...

  8. JQuery拖拽改变元素的尺寸

    "元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...

  9. MySQL使用笔记(六)条件数据记录查询

    By francis_hao    Dec 17,2016 条件数据记录查询 mysql> select field1,field2-- from table_name where 条件; 其中 ...

  10. POJ3169:Layout(差分约束)

    Layout Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15705   Accepted: 7551 题目链接:http ...