<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0; padding: 0} li{list-style: none} a{text-decoration: none; color: #333} .box{ width: 600px; height: 210px; margin: 50px auto 0; overflow: hidden; } .tab_item{float: left; width: 390px; height: 210px; border-right: 1px solid #ddd; background-color: #ddd; } .tab_item .tab_content{ height: 210px; text-align: center; line-height: 210px; font-size: 35px; } .tab_ui{ float: right; width: 200px; } .tab_ui li{ width: 200px; text-align: center; background-color: #C84E69; } .tab_ui li a{ display: block; height: 50px; line-height: 50px; margin-bottom: 3px; color: #fff; font-size: 20px;} .tab_ui li.current a{ background-color: #49A945; color: #fff;} </style> </head> <body> <div class="box"> <div class="tab_item" id="tab_item"> <div class="tab_content">春天的内容</div> <div class="tab_content" style="display: none;">夏天的内容</div> <div class="tab_content" style="display: none;">秋天的内容</div> <div class="tab_content" style="display: none;">冬天的内容</div> </div> <ul class="tab_ui" id="tab_ui"> <li class="current"><a href="javascript:;">春</a></li> <li><a href="javascript:;">夏</a></li> <li><a href="javascript:;">秋</a></li> <li><a href="javascript:;">冬</a></li> </ul> </div> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> //选项卡 $(function(){ //点击li事件 $("#tab_ui li").click(function(){ //添加当前状态current，它的同辈元素(siblings)移除当前状态current $(this).addClass('current').siblings('li').removeClass('current'); var z = $(this).index();//索引 //遍历找到对应的内容显示，同辈元素隐藏 $("#tab_item .tab_content").eq(z).show().siblings('#tab_item .tab_content').hide(); }); }) </script> </body> </html>
效果图：
注意：
若a标签中的href加“#”符号，如图
则，脚本应该多加一句，“return false” 阻止跳转的意思，如图：
