<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--自己的css--> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <!--选项卡1--> <div class="tab" id="tab1"> <ul class="tab-title clear"> <li class="active">详情</li> <li>评价</li> <li>活动</li> <li>问答</li> </ul> <ul class="tab-content"> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> </ul> </div> <!-- 第二个 --> <div class="tab" id="tab2"> <ul class="tab-title clear"> <li class="active">详情</li> <li>评价</li> <li>活动</li> <li>问答</li> </ul> <ul class="tab-content"> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> </ul> </div> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> console.log($(".table_title li")); $(".tab-title li").click(function() { $(this).siblings().removeClass("active") $(this).addClass("active"); //获取索引值 var i = $(this).index(); //全部隐藏 $(this).parent().siblings(".tab-content").find("li").css("display", "none"); $(this).parent().siblings(".tab-content").find("li").eq(i).css("display", "block"); }) </script> </html>