tab栏切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin: 0; padding: 0; } ul { display: flex; justify-content: space-around; align-items: center; border: 2px solid red; list-style: none; } ul>li { width: 100%; text-align: center; border-right: 2px solid red; cursor: pointer; } ul>li:last-child { border-right: 0; } .active { background-color: #ccc; } div>p { display: none; } .currenty { display: block; } </style> </head> <body> <ul> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div> <p class="currenty">11</p> <p>22</p> <p>33</p> <p>44</p> </div> <script> let aLi = document.querySelectorAll('li') let aP = document.querySelectorAll('p') let index = 0; for (var i = 0; i < aLi.length; i++) { (function(i){ aLi[i].onclick=function(){ aLi[index].className = '' aP[index].className = '' index = i aLi[index].className = 'active' aP[index].className = 'currenty' } })(i) } </script> </body> </html>