03JavaScript程序设计修炼之道 2019-06-23_14-50-05

电玩女神 2021-12-11 04:37 182阅读 0赞

1.png

![1603260-20190629194914236-1267733070.png][]

2.png

![1603260-20190629194952890-422400431.png][]

3.png

![1603260-20190629195021719-44187691.png][]

4.png

![1603260-20190629195048507-1880035884.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>

转载于:https://www.cnblogs.com/HiJackykun/p/11107698.html

[1603260-20190629194914236-1267733070.png]: /images/20211211/b608335adf1d43aeb1a1dbbaa5a4a9fc.png
[1603260-20190629194952890-422400431.png]: /images/20211211/a44b7617c6914a2c90b0918d7bce1148.png
[1603260-20190629195021719-44187691.png]: /images/20211211/4f0895e1d8084e439354b05171298eae.png
[1603260-20190629195048507-1880035884.png]: /images/20211211/8f3bc0d38fb7452da6232830ef457871.png