选项卡在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原生实现选项卡功能的更多相关文章

  1. Js原生实现抽奖功能

    <div>代码 按钮代码 JS原生代码  完整的代码: <div style="width:365px;height:300px;border:2px solid gree ...

  2. JS+CSS实现选项卡功能

    [小小一记] 首先我们写一个选项卡的结构出来,包括tab和content: 首先是tab: <ul class="ttitle-box-tabs" id="tabs ...

  3. Js原生封装选项卡组件

    class MyTab extends HTMLElement{ //创建一个类名MyTab constructor(){ //构造函数 super(); //指向父类构造函数,必须要有的 const ...

  4. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  5. 使用原生js实现选项卡功能实例教程

    选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

  6. 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  7. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  8. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  9. 原生js面向对象编程-选项卡(自动轮播)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. c语言-链表VS数组

    数组和链表的区别   数组是将元素在内存中连续存放,由于每个元素占用内存相同,可以通过下标迅速访问数组中任何元素.但是如果要在数组中增加一个元素,需要移动大量元素,在内存中空出一个元素的空间,然后将要 ...

  2. C语言 值传递和地址传递

    不少同学在学到C语言的指针部分时感到很困惑,对经常提到的"值传递"和"地址传递"两个概念弄不 明白.实际上,因为地址本身也可以作为一个特殊的"值&qu ...

  3. Struts框架——(二)Struts原理with登录实例

    二. Struts基本工作流程 假设现在有以下情景: 用户正在浏览一个用STRUTS的技术构建的网站主页,主页上有个登陆表单,用户填好登陆名和密码,单击"登陆"按钮,就激活了以下一 ...

  4. js中的call与apply深入浅出

    首先明确call()与apply()最大的区别,除了名字不同以外,就是参数不一样,call的参数需要一一列出,apply的第二个及其以后的参数需要组成一个数组传进来. 这两个函数的调用者不是对象,而是 ...

  5. easyui 中datagrid 点击行的事件

    $('#datagrid 的ID').datagrid({                onClickRow:function(index,data)                {        ...

  6. ios 关于状态栏的一些小知识

    一.改变状态栏颜色 状态栏分为两种颜色,默认的是黑色,这里想要改为白色: 分为两步: 第一步:在项目中找到plist文件,添加View controller-based status bar appe ...

  7. Python之字符串小代码解析

    本篇只是拿一段代码来对python中的字符串的一些使用做解释,来让大家更加了解python Python 3.4.0 (v3.4.0:04f714765c13, Mar 16 2014, 19:25: ...

  8. Nginx-->基础-->理论-->nginx进程模型

    一.nginx的进程模型基础 如上图,是nginx的基本进程模型. 1.nginx的master进程与worker进程关系 nginx的master进程负责worker进程的管理,包括创建worker ...

  9. bc:linux下命令行计算器

    在linux下,存在一个命令行的计算器:bc.该程序一般随发行版发布. bc计算器能够执行一些基本的计算,包括+,-,×,\,%. 这些计算不经针对十进制,还可以使用二进制,八进制,十六进制,并且可以 ...

  10. pil

    http://effbot.org/imagingbook/ 一.安装 pip install PIL --allow-external PIL --allow-unverified PIL   出现 ...