<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”也可以同样的设置样式。
时间: 2024-10-30 08:04:52