jQuery实现选项卡特效

Html

Css

Js

  

 选项1 
    
 选项2 
    
 选项3 
  
 内容1 
  
 内容2 
  
 内容3 

* { 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"); }) })

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

本例中添加的是鼠标经过事件，可以将mouseover换成click事件

循环导航中的li，给li添加事件，获取当前li的索引值，通过给内容项添加class名sel