选项卡在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. VC++中StretchBlt图像失真问题的解决办法

    在 VC 中使用 StretchBlt 会碰到一些与点阵图大小缩放相关的一些问题.在扩展一个点阵图时,StretchBlt必须复制图素行或列.如果放大倍数不是原图的整数倍,那么此操作会造成产生的图像有 ...

  2. 最近使用JQuery Easyui 碰到的几个奇怪问题

    最近项目想尝试Easyui来做做前端界面,但是刚开始就碰到几个问题,记录下来,免得忘了. 1. 点击添加或修改按钮后,弹出窗体,窗体内容参加“href”属性远程加载 问题:第一次弹出窗体正常,但是再次 ...

  3. 2.springMVC+spring+Mybatis整合

    前面已经说了,springMVC+spring+Mybatis的整合思路了,现在就照着这个思路来做一下: 在开始之前先来看一下工程的目录结构: config这个目录底下放的都是配置文件: mybati ...

  4. python Day01

    Python Day01 Python 简介 介绍 Python 是一种面向对象.直译式的计算机程序设计语言,也是一种功能强大的通用型语言,已经有将近二十年的发展历史,成熟稳定.包含了一组完善而且容易 ...

  5. scrollview技巧

    一行 CGFloat buttonX = 0; CGFloat buttonY = 25; CGFloat buttonW = 37; CGFloat buttonH = 60; CGFloat ma ...

  6. SecureCRT中文乱码解决已设置UTF-8

    查看服务器编码 查看linux的编码,修改为自己需要的,本文将已UTF-8为例进行说明.修改Linux服务器的配置文件:[root@iitshare ~]# vi /etc/sysconfig/i18 ...

  7. C# DataGridView控件清空数据完美解决方法

    C# DataGridView控件绑定数据后清空数据在清除DataGridview的数据时: 1.DataSource为NULL(DataGridView.DataSource= null;)这样会将 ...

  8. 010editor 破解 扩展

    1. 注册机注册,注册机搜一下吧 (破解算法各版本通用) 2. 绕过网络验证,每次关闭010editor时都会网络验证,并将验证结果写道本地,所以: HKEY_CURRENT_USER\Softwar ...

  9. Powershell获取并导出指定日期EventLog

    $date = Get-Date 28/07/16 Get-EventLog -After $date "Application"|Export-Csv c:\ming.csv

  10. WebMethod在webservice里面非静态方法能调用,在页面类里面,静态方法才能调用

    WebMethod在webservice里面非静态方法能调用,在页面类里面,静态方法才能调用