39-JavaScript-频道切换

旧城等待， 2022-09-18 13:47 87阅读 0赞

# 1. 布局 #

![SouthEast][]

注: <div display=none>是伪代码.

# 2. 实现中的难点 #

**1) 垂直居中的实现**  
  
前提: 容器不设 height  
实现: 通过 padding-top 和 padding-bottom 压到中间去  
  
 **2) 超链接组 如何切换显示**  
  
display: none;

display: block;

# 3. 代码 #

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    
    <style type="text/css">
    
    body {
        font-size: 12px;
    }
    
    /*最外围的div*/
    .outer {
        /*background-color: green;*/
        width: 126px;
        height: 156px;
    }    
    
    /* 导航栏 */
    .navigateBar {
        /*background-color: silver;*/
        width: 21px;
        height: 156px;
        float: left;
    }
    
    .navigateBar ul {
        padding: 0; /* 去掉ul的填充 */
        margin-left: 0px;
        margin-top: 0px;
        float: left;
    }
    
    .navigateBar li {
        list-style-type: none;  /*去掉项目标记*/
        margin-top: 1px;
        margin-bottom: 2px; /*项目之间 间隔开*/
        float: left;
    
        background-color: silver;
    
        width: 21px;
        /*height: 50px;*/
    
        text-align: center; /*水平居中*/
    
        padding-top: 10px;  /*垂直居中, 通过padding的方式,前提是不设置高度*/
        padding-bottom: 11px;
        
        cursor: pointer; /*鼠标箭头为 手型*/
    }
    
    .list {
        /*background-color: gray;*/
        width: 101px;
        height: 156px;
        float: left;
        margin-left: 3px;
    }
    
    .list ul li {
        list-style-type: none;
        height: 20px;
    }
    
    .list ul {
        padding: 0; /* 去掉ul的填充 */
        margin-left: 0px;
        margin-top: 0px;
        float: left;
    }
    
    /*初始显示第一个装超链接的 div*/
    .zhaosheng {
        display: block;
    }
    
    .rezhao, .chuguo {
        /*visibility: hidden;*/ 
        display: none;
    }
    
    
    </style>
    
    <script type="text/javascript">
        
        var linkDivs = new Array(); // 装超链接的 3个 <div>
        var naviLis;    // 导航栏的 三个 <li>
    
        // 初始化 linkDivs naviLis
        window.onload = function() {
    
            linkDivs.push( document.getElementById("zhaosheng") );
            linkDivs.push( document.getElementById("rezhao") );
            linkDivs.push( document.getElementById("chuguo") );
            // console.info( linkDivs );
    
            var naviItems = document.getElementById("naviItems");
            naviLis = naviItems.getElementsByTagName("li");
    
            // console.info(naviLis );
    
            naviLis[0].style.backgroundColor = "orange";
        }
    
        function initStyle(exclusive) {
            for (var i = 0; i < linkDivs.length; i++) {
                if (exclusive == i) {
                    naviLis[i].style.backgroundColor = "orange";
                    linkDivs[i].style.display = "block";
                    continue;
                }
                naviLis[i].style.backgroundColor = "silver";
                linkDivs[i].style.display = "none";
            };
        } 
    
        function show(exclusive) {
            initStyle(exclusive);
        }
    
    </script>  
    
    </head>
    <body>
    ---------------------------------
        
    <div class="outer">
        <div class="navigateBar">
            <ul>
                <li οnmοuseοver="show(0)">招生</li>
                <li οnmοuseοver="show(1)">热招</li>
                <li οnmοuseοver="show(2)">出国</li>
            </ul>
        </div>
        
        <div class="list zhaosheng" id="zhaosheng">
            <ul>
                <li><a href="#">招生招生招生招生</a></li>
                <li><a href="#">招生招生招生招生</a></li>
                <li><a href="#">招生招生招生招生</a></li>
                <li><a href="#">招生招生招生招生</a></li>
                <li><a href="#">招生招生招生招生</a></li>
                <li><a href="#">招生招生招生招生</a></li>
                <li><a href="#">招生招生招生招生</a></li>
                <li><a href="#">招生招生招生招生</a></li>
            </ul>
        </div>
        <div class="list rezhao" id="rezhao">
            <ul>
                <li><a href="#">热招热招热招热招</a></li>
                <li><a href="#">热招热招热招热招</a></li>
                <li><a href="#">热招热招热招热招</a></li>
                <li><a href="#">热招热招热招热招</a></li>
                <li><a href="#">热招热招热招热招</a></li>
                <li><a href="#">热招热招热招热招</a></li>
                <li><a href="#">热招热招热招热招</a></li>
                <li><a href="#">热招热招热招热招</a></li>
            </ul>
        </div>    
        <div class="list chuguo" id="chuguo">
            <ul>
                <li><a href="#">出国出国出国出国</a></li>
                <li><a href="#">出国出国出国出国</a></li>
                <li><a href="#">出国出国出国出国</a></li>
                <li><a href="#">出国出国出国出国</a></li>
                <li><a href="#">出国出国出国出国</a></li>
                <li><a href="#">出国出国出国出国</a></li>
                <li><a href="#">出国出国出国出国</a></li>
                <li><a href="#">出国出国出国出国</a></li>
            </ul>
        </div>
    </div>
    ---------------------------------
    </body>
    </html>

[SouthEast]: /images/20220828/5ebe8cfe49254ec5a517a73ef50d5a45.png