jq TAB切换

最新推荐文章于 2025-09-11 10:42:34 发布

weixin_30466039

最新推荐文章于 2025-09-11 10:42:34 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/well-nice/p/4725079.html

<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”也可以同样的设置样式。

转载于:https://www.cnblogs.com/well-nice/p/4725079.html