<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. CUDA9.0+tensorflow-gpu1.8.0+Python2.7服务器环境搭建经验

    最近在实验室的服务器上搭建Tensorflow,CUDA是默认的9.0,管理员已经装好了,同时环境变量都已经配好. 直接用Anaconda创建的虚拟环境,使用pip install tensorflo ...

  2. UVA 11297 Census(二维线段树)

    Description This year, there have been many problems with population calculations, since in some cit ...

  3. HDU 1028 整数拆分问题 Ignatius and the Princess III

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  4. POI实现excel的数据验证

    目录 前言 难点1:合并单元格 代码实现策略: step 1: 合并单元格 step 2: 给单元格赋值 难点2:数据验证-下拉框 代码实现策略: step 1:设置需要进行数据验证的单元格范围和可供 ...

  5. lintcode-124-最长连续序列

    124-最长连续序列 给定一个未排序的整数数组,找出最长连续序列的长度. 说明 要求你的算法复杂度为O(n) 样例 给出数组[100, 4, 200, 1, 3, 2],这个最长的连续序列是 [1, ...

  6. lintcode-74-第一个错误的代码版本

    74-第一个错误的代码版本 代码库的版本号是从 1 到 n 的整数.某一天,有人提交了错误版本的代码,因此造成自身及之后版本的代码在单元测试中均出错.请找出第一个错误的版本号. 你可以通过 isBad ...

  7. nginx1.10.3+php5.6+mysql5.7.0

    第一步安装nginx1.10.3 优化nginx的介绍:jemalloc https://ideas.spkcn.com/software/os/linux/577.html 预先安装autoconf ...

  8. 在浏览器中从FTP下载文件

    public static class FTPHelper { /// <summary> /// 得到特定FTP目录的文件列表 /// </summary> /// < ...

  9. 【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 ...

  10. Web.config配置文件中的属性add,key,value含义

    这是添加自定义字符串的方式,保存是以键-值的形式保存的,可以通过key获取value,一般用这种方法配置全局内使用的字符串. <configuration>是配置文件的根配置节. < ...