js使用排他思想实现导航栏的切换

导航栏的切换

html代码如下:

<div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>
    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>

css样式:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        overflow: hidden;
    }
    ul {
        width: 600px;
        height: 40px;
        margin-left: -1px;
        list-style: none;
    }
    li {
        float: left;
        width: 101px;
        height: 40px;
        text-align: center;
        font: 600 18px/40px "simsun";
        background-color: pink;
        cursor: pointer;
    }
    span {
        display: none;
        width: 500px;
        height: 360px;
        background-color: yellow;
        text-align: center;
        font: 700 150px/360px "simsun";
    }
    .show {
        display: block;
    }
    .current {
        background-color: yellow;
    }
</style>

js代码如下:

<script>
    //首先获取所有的li
    var box = document.getElementsByClassName("box");
    //循环调用函数 有几个box,调用几次 互不影响
    for(var i = 0;i<box.length;i++){
        fn(box[i]);
    }
    function fn(ele){
        var liArr = ele.getElementsByTagName("li");
        var spanArr = ele.getElementsByTagName("span");
        for(var i = 0;i < liArr.length;i++){
            //为每个li绑定索引值
            liArr[i].index = i;
            liArr[i].onmouseover = function(){
                //为所有的li标签添加鼠标移入事件  排他思想，干掉所有人，设置自己
                for(var j = 0;j<liArr.length;j++){
                    liArr[j].className = "";
                    spanArr[j].className = "";
                }
                //设置当前鼠标移入的类名为current
                this.className = "current";
                //设置当前的索引值所对应的span标签的类名为show
                spanArr[this.index].className = "show";
            }
        }
    }
</script>

排他思想:

干掉所有人，设置我自己，先将所有人全设置为"",然后再设置当前的值

运行结果如下: