选项卡tab实现2
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>test</title><script src="jquery.js"></script><style>:hover{} /*for ie7*/html,body,ul,li{margin:0;padding:0px;}ul,li{list-style:none;}#wrap{margin:10px;width:500px;border:1px solid rgb(108, 146, 173);}#wrap .tab{height:29px;background-color:rgb(234, 240, 253);}#wrap .tab li{float:left;}#wrap .tab li a{display:inline-block;font-weight:bold;color:rgb(0, 85, 144);height:30px;line-height:30px;padding:0px 20px;border-right:1px solid rgb(108, 146, 173);cursor:pointer;}#wrap .tab li a:hover{background-color:orange;}#wrap .tab li a.selected{background-color:white;}#wrap .content{padding:10px;border-top:1px solid rgb(108, 146, 173);}#wrap .content > div{height:200px;display:none;}#wrap .content > div.selected{display:block;}</style><script>$(function(){$('#wrap').delegate('.tab li','click',function(){var $self=$(this);//设置tab$self.siblings().find('a').removeClass('selected');$self.find('a').addClass('selected');//设置contentvar $contents=$('#wrap .content > div');$contents.removeClass('selected');$contents.eq($self.index()).addClass('selected');});});</script></head><body><div id="wrap"><ul class="tab"><li><a class="selected">tab1</a></li><li><a>tab2</a></li><li><a>tab3</a></li><li><a>tab4</a></li></ul><div class="content"><div class="selected">content1</div><div>content2</div><div>content3</div><div>content4</div></div></div></body></html>