<!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="https://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切换 图片灰暗切换的例子：http://www.sucaihuo.com/jquery/12/1245/demo/