学习jQuery不久，整了个tab选项卡效果。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>tab</title> <link rel="stylesheet" href="css/reset.css" media="all"> <link rel="stylesheet" href="css/style.css" media="all"> </head> <body> <div class="info"> <ul class="info_tit clearfix tab_hd"> <li class="fl"><a href="javascript:;" class="block fl" hidefocus="none">职业属性</a></li> <li class="fl"><a href="javascript:;" class="block fl" hidefocus="none">职业特点</a></li> </ul> <div class="info_cnt tab_bd"> <div class="box hide">111111</div> <div class="box hide">222222</div> </div> </div> </body> </html> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //tab切换 $(function(){ function tabs(tabTit,on,tabCon){ $(tabTit).find('a').each(function(i){ $(tabTit).find('a').eq(0).addClass(on); $(this).click(function(){//鼠标点击效果 可改 hover鼠标滑过效果 $(this).addClass(on).parents('li').siblings().find('a').removeClass(on);//鼠标点击，给当前a添加cur类，兄弟元素则删除cur类 $(tabCon).children().eq(i).show().siblings().hide(); }) }) $(tabCon).children().eq(0).show(); } tabs('.tab_hd','cur','.tab_bd'); }) }) </script>