动态焦点:总结js实现动态选项卡的四种方法！

JS多种方法实现动态选择选项卡

首先贴出HTML 和 CSS 这个不是重点

(相关资料图)

                Document                                新闻
            电影
            音乐
        
          嘟嘟
        滴滴
        嘟嘟滴滴
     
       <script src="js/tab_zy.js"></script>

【实现思路】

给所有的LI绑定点击事件，当点击任何一个li 的时候，都做第二步操作

可以先让所有的LI && p 的class都为空（xxx.className=’’）,在让当前点击的这个LI和对应的p有 active这个样式类即可

以下是JS获取元素的公用部分

var oBox = document.getElementById("tabBox"),    oList = oBox.getElementsByTagName("li"),    op = oBox.getElementsByTagName("p");

方案一

var LastIndex = 0 //记录上次所选的LI 选中的索引for(var i=0;i如果当前点击的索引和上一次索引相同（点击的就是上一个被选中的），我们不做任何事情oList[LastIndex].className = op[LastIndex].className = ""//=>清空上一次oList[this.CurIndex].className=op[this.CurIndex].className = "active"//=>修改LAST-INDEX值，让当前本选中的索引作为下一次点击要清除的上一次的索引LastIndex  = this.CurIndex}}

方案二：

//=>1.传递对象for(var i = 0; i如果当前循环的LI和传递进来点击的那个元素相同，说明当前循环的这个LI就是被点击的，让其有选中样式if(oList[j]===n){oList[j].className= op[j].className = "active"}else{//=>不相等，则不是被点击的，我们取消选中样式即可oList[j].className= op[j].className = ""}}}

方案三：

for (let i = 0; i < tabList.length; i++) {    tabList[i].onclick=function(){        // 事件绑定：给当前元素的某一个事情绑定一个方法，绑定的时候方法没有执行        // （属于创建一个方法，当在页面中手动触发点击事件的时候绑定的方法才会执行）        changeTab(i);    }    }// 形参变量：当执行这个方法的时候，会把当前点击的这个LI索引传递过来function changeTab(n) {    // 1、所有都没有选中样式    for (let i = 0; i < tabList.length; i++) {        tabList[i].className="";        pList[i].className ="";            }    // 2、当前点击的所有选中样式    tabList[n].className="active";    pList[n].className = "active";}

方案四：（JQ实现）

//当HTML结构都加载完成执行函数jQuery(function($){        //基于JQ内置EACH机制，给每个LI 都绑定了 点击事件        $(".tabBox>.header>li").on("click",function(){            let index = $(this).index();//获取当前点击LI 的索引            //siblings()  获取兄弟元素            $(this).addClass("active").siblings().removeClass("active").parent().nextAll("p").eq(index).addClass("active").siblings("p").removeClass("active")                   });});

相关推荐：【JavaScript视频教程】

以上就是总结js实现动态选项卡的四种方法！的详细内容，更多请关注php中文网其它相关文章！

关键词：相关文章这个不是视频教程