js 点击导航栏切换对应模块内容

点击导航栏切换对应模块内容

导航栏的制作

排他算法

自定义属性的应用

 <!-- css样式代码 -->
    <style>
        .box {
            width: 500px;
            margin: 100px auto;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;

        }

        li {
            /* li和liz之间有空白间隙,因为换行符,要么都写在一行上,要么用float*/
            float: left;
            background-color: teal;


        }

        a {
            display: block;
            padding: 14px 27px;

        }

        /* li a:hover {
            background-color: violet;
        }
 */
        .content div {
            display: none;
        }



        .current {

            background-color: red;
        }
    </style>
 <!-- html和代码 -->
    <div class="box">
        <div class="tab">
            <ul>
                <li class="current"><a>首页</a></li>
                <li><a>教务处</a></li>
                <li><a>财务处</a></li>
                <li><a>图书馆</a></li>
                <li><a>保卫处</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="item" style="display:block;">首页</div>
            <!-- 一开始的显示 -->
            <div class="item">教务处</div>
            <div class="item">财务处</div>
            <div class="item">图书馆</div>
            <div class="item">保卫处</div>
        </div>
    </div>

    <script>
        //我鼠标点击它就变换颜色,用排他思想
        //获取事件源
        var lis = document.querySelectorAll('li');
        var divs = document.querySelectorAll('.item');
        //绑定事件,执行程序
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i);//给li添加一个序列号,相当于对应下面div的序列号
            lis[i].onclick = function () {//给每个模块加上点击事件
                for (var i = 0; i < lis.length; i++) {//一点击就把所有的模块背景变成普通颜色
                    lis[i].className = '';
                }
                //把点击的那一个附上红色
                this.className = 'current';
                //排他思想,先把所有都隐藏
                var index = this.getAttribute('index');
                for (var i = 0; i < divs.length; i++) {
                    divs[i].style.display = 'none';
                }
                //再只显示一个
                divs[index].style.display = "block";
            }
        }
    </script>