tab切換效果
阿新 • • 發佈：2017-05-10
this width har head -c otto itl int ide
<!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切換效果