<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="container"> <ul class="tab clearfix"> <li class="sel aa">选项1</li> <li class="aa">选项2</li> <li class="aa">选项3</li> </ul> <div class="con sel">内容1</div> <div class="con">内容2</div> <div class="con">内容3</div> </div> <div class="container"> <ul class="tab clearfix"> <li class="sel aa">选项1</li> <li class="aa">选项2</li> <li class="aa">选项3</li> </ul> <div class="con sel">内容1</div> <div class="con">内容2</div> <div class="con">内容3</div> </div> <div class="container"> <ul class="tab clearfix"> <li class="sel aa">选项1</li> <li class="aa">选项2</li> <li class="aa">选项3</li> </ul> <div class="con sel">内容1</div> <div class="con">内容2</div> <div class="con">内容3</div> </div> </body> <script src="js/jquery-1.11.3.min.js"></script> </html>
*{margin:0;padding:0;} .clearfix{zoom: 1;} .clearfix:after{content:".";display:block;width:0;height:0;visibility:hidden;clear:both;} .container{margin:20px;} ul{list-style:none;padding-left:20px;} ul li{float:left;padding:5px 10px;text-align:center;border:1px solid #ccc;border-bottom:0;} .con{display:none;width:300px;border:1px solid #ccc;height:200px;text-align:center;} ul li.sel{background-color:red;} .con.sel{display:block;}
$(".container").find($(".aa")).each(function(){
$(this).bind("mouseover",function(){
var index=$(this).index();
var $this=$(this);
$this.addClass("sel");
$this.siblings().removeClass("sel");
$this.parent().siblings().removeClass("sel");
$this.parent().siblings().eq(index).addClass("sel");
})
})