选项卡在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. Eclipse搭建GWT开发环境

    1.下载Eclipse Kepler(4.3) 2.下载Maven       Apache Maven     Maven 3.下载JDK 4.设置系统变量Maven.JAVA_HOME.PATH. ...

  2. APP测试之登录

    我们公司产品登录很简单 手机号为账号,每次登录输入短信验证码.验证码为6位数字.登陆后可以记录登录状态.未登录时可以微信登录然后验证或者APP登录后可以在个人中心绑定微信. 一APP内部登录 1.手机 ...

  3. iOS开发XCODE5 SVN配置 使用办法 (转) 收藏一下

    标签: xcode5svn xcodesvn使用 xcode自带的svn xcodesvn版本操作 xcode自带svn版本   这两天响应老板要求,把所有代码放到公司的SVN服务器上,按照我的想法肯 ...

  4. 设置mysql utf8

    1.修改mysql 配置文件my.cnf 标签[mysqld]下添加即可 character-set-server = utf8

  5. centos配置vpn服务器

    1.配置epel软件源wget http://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm2.安装PPTP服务端软件yu ...

  6. 抽象和封装_JAVA_OOP

    很久没做笔记了,没有以前的刚开始学习软件时候的热情了.包括几年前U盘损坏,数据丢失,通过数据恢复,也只是找回一些零星的碎片. 现在就抽时间把以前的技术笔记找回来,这十条记录在电脑上显示的最后修改日期为 ...

  7. 在使用dot。js中的值中有空格出现后,进行去除

    title= {{= x.replace(/ /g,' ') 通过replace将数据进行处理再展示

  8. c++常见面试题

    1.class和struct的区别? 在c++中,在class中声明的成员默认为private成员,而在struct中声明的成员默认为public成员,class的默认继承方式为private,str ...

  9. shell编程之运算符

    declare声明变量类型 declare    [+ / -] [选项]  变量名 - :给变量设定类型属性 + :取消变量的类型属性 -a :将变量声明为数组型 -i :将变量声明为整数型 -x ...

  10. [C#][.net 4]Task 代码示例

    using System; using System.Threading; using System.Threading.Tasks; using System.Windows.Forms; name ...