JS切换类并显示相应的内容模块

最新推荐文章于 2024-04-08 21:36:34 发布

sennyla

最新推荐文章于 2024-04-08 21:36:34 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：原生JS实现的样例文章标签： JS 切换类

本文链接：https://blog.youkuaiyun.com/sennyla/article/details/79177696

原生JS实现的样例专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用纯JavaScript实现的导航栏切换效果。通过给导航栏的各个选项添加点击事件，可以高亮当前选中的选项，并显示相应的页面内容。同时，其他选项恢复到默认状态，确保每次只有一个选项处于激活状态。

思路：一层循环遍历操作的元素并获取当前遍历到的元素的下标，通过下标去选择显示对应的内容模块。

二层循环将元素恢复操作前的状态。

var fbUls =document.getElementById("oUl");
var fbLis = fbUls.getElementsByTagName("li");
var aDivs = document.getElementsByClassName("theDiv");
for(var i = 0,val=fbLis.length;i<val;i++){
    fbLis[i].index = i; //存放当前元素的下标
    fbLis[i].onclick = function(){
        for(var j=0; j< fbLis.length; j++){
            fbLis[j].className="";
            aDivs[j].style.display = "none";
        }
        //给当前点击的元素添加活跃标记
        this.className="liactive";
        //显示对应的模块内容
        aDivs[this.index].style.display = "block";
    };
}

<div>
    <ul id="oUl">
        <li class="liactive">首页</li>
        <li>产品</li>
        <li>合作</li>
    </ul>
</div>
<div class="theDiv" id="oDiv1" style="display:block;">首页模块内容：这是首页</div>
<div class="theDiv" id="oDiv2">产品模块内容：这是产品</div>
<div class="theDiv" id="oDiv3">合作模块内容：这是合作</div>