1.png
2.png
3.png
4.png
注意：
思想：排他思想 this的正确使用
选项卡.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> *{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;} #container{ width: 398px; margin: 100px auto;} #container a{ display:block ; width: 98px; height: 42px; line-height: 42px; text-align: center; float: left; border-top: solid 1px #FF4400; border-bottom: solid 1px #FF4400; border-left: solid 1px #FF4400; color: #333333; text-decoration: none; } #container a:hover{ color: #FF4400; } .content{ width: 355px; height: 140px; text-align: center; border-right: solid 1px #FF4400; border-bottom: solid 1px #FF4400; border-left: solid 1px #FF4400; padding: 30px 0 0 40px; display: none; } .clear{clear: left;} #container a.on{ background: #FF4400; color: #fff;} </style> </head> <body> <div id="container"> <a href="#" class="on">充话费</a> <a href="#" >充流量</a> <a href="#" >充固话</a> <a href="#" style="border-right: solid 1px #FF4400;">充宽带</a> <div class="clear"></div> <div class="content" style="display:block;"> <img src="images/1.png" /> </div> <div class="content"> <img src="images/2.png" /> </div> <div class="content"> <img src="images/3.png" /> </div> <div class="content"> <img src="images/4.png" /> </div> </div> </body> </html> <script type="text/javascript"> // 鼠标放到每个菜单上 当前菜单变样式 其他菜单移除on样式 并且对应的div显示 其他隐藏 // 找到四个菜单和四个内容div var as = document.getElementsByTagName("a"); var container = document.getElementById("container"); var contents = container.getElementsByTagName("div"); contents = Array.from(contents); contents.shift(); // 循环注册事件 for(var i=0; i<as.length; i++) { //as[i].index = i; //方法1 as[i].setAttribute("index",i);//方法2 as[i].onmouseover = function() { // 当前菜单变样式 其他菜单移除on样式 // 先移除所有菜单样式 for(var j=0; j<as.length; j++) { as[j].className = ""; contents[j].style.display = "none"; } this.className = "on"; // 并且对应的div显示 其他隐藏 // 先让所有内容div隐藏 contents[this.getAttribute("index")].style.display = "block"; } } </script>