tab点击切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { box-sizing: border-box; } #nav { height: 50px; } #nav a { display: block; height: 50px; line-height: 50px; padding: 0 15px; font-size: 18px; text-align: center; font-family: 'Microsoft YaHei'; float: left; background- color: #e1e1e1; cursor: pointer; } #nav a.on { border-bottom: 2px solid #e60012; } #contentBox { width: 280px; height: 100px; } #contentBox .box { text-align: center; line-height: 100px; font-size: 24px; font-weight: blod; display: none; } #contentBox .box.active { display: block; } </style> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> </head> <body> <section> <nav id="nav"> <a class="on">tab1</a> <a>tab2</a> <a>tab3</a> <a>tab4</a> </nav> <div id="contentBox"> <div class="box active">内容一</div> <div class="box">内容二</div> <div class="box">内容三</div> <div class="box">内容四</div> </div> </section> </body> <script type="text/javascript"> $(function() { $("#nav a").off("click").on("click", function() { var index = $(this).index(); $(this).addClass("on").siblings().removeClass("on"); $("#contentBox .box").eq(index).addClass("active").siblings().removeClass("active"); }); }); </script> </html>