// if ($(this).hasClass('activeC')) { // $(this).removeClass('activeC') // } else { // $('.nav-children div').removeClass('activeC') // $(this).addClass('activeC') // }
首先引入jquery.js
<!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"> <!--自动适应手机屏幕宽度的方法--> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-3.3.1.min.js"></script> <title>****</title> </head> <body style="background: #e6e6e6;"> <div class="content"> <div class="contentLeft"> <span class="contentT on">摄像头1</span> <span class="contentT">摄像头2</span> <span class="contentT">摄像头3</span> <span class="contentT">摄像头4</span> </div> <div class="contentRight"> <div class="contentD active"> 1111 </div> <div class="contentD "> 2222 </div> <div class="contentD"> 333 </div> <div class="contentD"> 4444 </div> </div> </div> </body> <script> $(document).ready(function () { // tab切换 $(".contentT").off("click").on("click", function () { var index = $(this).index(); $(this).addClass("on").siblings().removeClass("on"); $(".contentD").eq(index).addClass("active").siblings().removeClass("active"); }); }) </script> </html>
.content{ margin-top: 240px; 100%; display: flex; } .contentLeft{ 30%; margin-right: 20px; color: #666666; text-align: center; } .contentT{ display: inline-block; height: 60px; line-height: 60px; background: white; 100%; } .contentT.on{ display: inline-block; color: #8ec21f; background: #e6e6e6; } .contentRight{ flex: 1; background: #e6e6e6; margin-right: 20px; } .contentD{ display: none; } .contentD.active{ display: block; }
