自己比较喜欢用的tab切换方式，粘贴复制代码直接使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } a { text-decoration: none; } .navlist { width: 1240px; margin: 20px auto 0; } .navlist ul { font-size: 0; } .navlist ul li { display: inline-block; width: 115px; height: 41px; line-height: 41px; background-color: #f8f8f8; border: solid 1px #eaeeed; text-align: center; } .navlist ul li a { width: 100%; height: 100%; display: block; font-size: 16px; color: #000; } .navlist ul .active { background-color: #fc9900; } .navlist ul .active a { color: #fff; } .contentBody { background-color: #fff; display: none; width: 1240px; height: 300px; margin: 0 auto; padding: 0 30px; box-sizing: border-box; color: #333; border: solid 1px #e8e8e8; position: relative; } .contentBody.active { display: block !important; } </style> </head> <body> <!-- tab栏 --> <div class="navlist"> <ul> <li class="active"> <a href="javascript:;">tab1</a> </li> <li> <a href="javascript:;">tab2</a> </li> <li> <a href="javascript:;">tab3</a> </li> </ul> </div> <div class="navContent"> <div class="contentBody active">content1</div> <div class="contentBody">content2</div> <div class="contentBody">content3</div> </div> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script> $(function () { $(".navlist li").click(function () { $(".navlist li").removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $(".contentBody").removeClass('active'); $(".contentBody:eq(" + index + ")").addClass('active'); }); }) </script> </body> </html>