js原生实现选项卡功能

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js原生实现选项卡功能相关的知识,希望对你有一定的参考价值。

选项卡在js中是一个重要的知识点。他没有那么难,但在工作中却有重要的位置。几乎在每一个网站都能看到选项卡的实例。所以今天写一下选项卡的实现。

我们设想有三个按钮分别来控制三个盒子当我们点击当前的按钮的时候,让对应的盒子显示,让其余的盒子隐藏。

废话不多说,直接上代码

首先来布局:

<div id="box">
      <input type="button" value="书籍" class="on">
      <input type="button" value="图片">
      <input type="button" value="专栏">
      <div style="display:block;">书籍</div>
      <div>图片</div>
      <div>专栏</div>
</div>

当然有必要给他们添加样式,为实现选项卡的效果做准备

以下为css样式:

#box div{
            width:200px;
            height:200px;
            background:#ccc;
            display:none;
        }
        .on{
            color:#fff;
            background:green;
        }

这样我们可以得到一个静态的选项卡。

选项卡的思路是当我们点击的当前的按钮的时候,先清空所有的样式,再给当前的按钮和盒子添加样式。

以下为js代码:

<script>
    //获取元素
    var oBox = document.getElementById("box");
    var aBtn = oBox.getElementsByTagName("input");
    var aDiv = oBox.getElementsByTagName("div");
    //aBtn是一组元素,所以需要用到for循环
    for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aBtn[i].onclick=function(){
            for(var k=0;k<aBtn.length;k++){//先清空所有的样式
                aBtn[k].className =‘‘;
                aDiv[k].style.display =‘none‘;
            }
            //给当前的按钮和div添加样式
            this.className =‘on‘;
            aDiv[this.index].style.display =‘block‘;
        };
    }
</script>

 

以上是关于js原生实现选项卡功能的主要内容,如果未能解决你的问题,请参考以下文章

js原生实现选项卡功能

普通选项卡+自动播放功能+向前/向后按钮 原生js

原生js实现选项卡

js原生实现选项卡

选项卡片段内的卡片视图

tab选项卡代码(原生js)