首页 > 代码库 > tab切换效果
tab切换效果
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>TLC-N130常见问题</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> <script type="text/javascript" src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script> <style> *{margin: 0;padding: 0} /*tab切换的css*/ /*#wrap_box {width:100%; margin:0 auto; }*/ #tit {height: 35px;width:100%;} #tit span {float: left; height: 30px; line-height: 30px; width: 100px; font-size: 14px; text-align: center; color: #333;cursor: pointer} #tit span.select {border-bottom: 3px solid #52baff; color: #52baff;} #con_box div.show {display: block;width: 94%;margin-left: 3%} .div1_box{width: 94%;margin-left: 3%} </style></head><body><!--<div id="wrap_box">--> <div id="tit"> <span class="select">硬件相关</span> <span>App相关</span> </div> <ul id="con_box"> <div class="show div1_box"> <!--第一块开始--> 111 <!--第二块结束--> </div> <div class="div1_box" style="display: none"> <!--第二块开始--> 22222 <!--第二块结束--> </div> </ul><!--</div>--><script type="text/javascript"> /*问题分类的js*/ $(‘#tit span‘).click(function() { var i = $(this).index();//下标第一种写法 //var i = $(‘tit‘).index(this);//下标第二种写法 $(this).addClass(‘select‘).siblings().removeClass(‘select‘); $(‘#con_box .div1_box‘).eq(i).show().siblings().hide(); });</script></body></html>
tab切换效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。