首页 > 代码库 > jquery tab选项卡
jquery tab选项卡
学习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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。