JS——tab切换
排它思想:
1、先让所有的元素恢复默认值
2、再让选中的元素赋专有的值
3、干掉所有人,剩下我一个
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box1 { width: 500px; height: 400px; border: 1px solid #b6ff00; overflow: hidden; margin: 100px auto; } ul { width: 510px; height: 40px; list-style: none; } li { float: left; width: 101px; height: 40px; text-align: center; font: 400 15px/40px "simsun"; background-color: beige; cursor: pointer; } span { display: none; width: 500px; height: 360px; background-color: #ffd800; text-align: center; font: 700 150px/360px "simsun"; } .current { background-color: #ffd800; } .show { display: block; } </style> </head> <body> <div class="box1"> <ul> <li>鞋子</li> <li>上衣</li> <li>下装</li> <li>棉衣</li> <li>夏装</li> </ul> <span>鞋子</span> <span>上衣</span> <span>下装</span> <span>棉衣</span> <span>夏装</span> </div> <script> var lis = document.getElementsByTagName("li"); var sps = document.getElementsByTagName("span"); for (var i = 0; i < lis.length; i++) { lis[i].onclick = function () { for (var j = 0; j < lis.length; j++) { lis[j].className = lis[j].className.replace(/current/g, ""); } this.className = this.className + " current"; for (var m = 0; m < sps.length; m++) { sps[m].className = sps[m].className.replace(/show/, ""); } for (var n = 0; n < sps.length; n++) { if (sps[n].innerHTML == this.innerHTML) { sps[n].className = sps[n].className + " show"; } } } } </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> button { margin: 10px; width: 100px; height: 40px; cursor: pointer; } .current { background-color: yellow; } </style> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> var btns = document.getElementsByTagName("button"); for (var i = 0; i < btns.length; i++) { btns[i].onmouseover = function () { for (var j = 0; j < btns.length; j++) { btns[j].className = btns[j].className.replace(/current/, "");//让所有的元素恢复默认值 } this.className = this.className + " current";//让选中的元素赋专有的值 } } </script> </body> </html>