JS之tab栏切换(复杂版)

需求：在同个页面多处使用tab栏切换

知识点：函数的封装，for循环调用函数

<body>
<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>
<script>
//需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类)
//思路：点亮盒子     利用索引值显示盒子
//获取事件源和相关元素
var boxArr = document.getElementsByClassName("box");
//函数调用
for (var i = 0; i < boxArr.length; i++) {
    fn(boxArr[i]);
}

//函数封装
function fn(ele){
var liArr = ele.getElementsByTagName("li");
var spanArr = ele.getElementsByTagName("span");
//绑定事件
for (var i = 0; i < liArr.length; i++) {
    //绑定索引值
    liArr[i].setAttribute("index",i);
    liArr[i].onmouseover = function(){
        //点亮盒子     利用索引值显示盒子
        for (var j = 0; j < liArr.length; j++) {
            liArr[j].removeAttribute("class");
            spanArr[j].removeAttribute("class");
        }
        this.setAttribute("class","current");
        spanArr[this.getAttribute("index")].setAttribute("class","show");
    }
}
}
</script>
</body>

 

posted @ 2017-12-20 10:17  乖乖乖码  阅读(425)  评论(0)  编辑  收藏  举报