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

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>
03JavaScript程序设计修炼之道 2019-06-23_14-50-05

猜你喜欢
