<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0; padding:0;}
        .out-box{overflow:hidden;}
        ul{overflow:hidden;}
        ul li{list-style: none; float:left; margin-right:10px;}
        .con{width:300px;height:150px; line-height:150px; display: none; background:red; position: absolute; top:30px; left:0;}
        .con1{background:red;}
        .con2{background:blue;}
        .con3{background:yellow;}

    </style>
</head>
<body>

<div class="out-box" id="box">
    <ul id="ul">
         <li><button>按钮1</button></li>
         <li><button>按钮2</button></li>
         <li><button>按钮3</button></li>
    </ul>
    <div class="con con1">1111111111</div>
    <div class="con con2">1111111111</div>
    <div class="con con3">1111111111</div>

</div>

<script>
    /*方法一*/
    var aUl=document.getElementById("ul");
    var aLi=aUl.getElementsByTagName("li");
    var aDiv=document.getElementsByClassName("con");
    console.log(aDiv);
    for(var i=0; i<aLi.length; i++){
        aLi[i].index=i;   //把i值存起来
        aLi[i].onclick= function () {
            for(var j=0; j<aDiv.length; j++){
                aDiv[j].style.display="none";  //清除div样式
            }
            aDiv[this.index].style.display="block";  //给当前的div盒子赋样式

        }
    }

    /*方法二*/
    var aUl=document.getElementById("ul");
    var aLi=aUl.getElementsByTagName("li");
    var aDiv=document.getElementsByClassName("con");
    for(var i=0; i<aLi.length; i++){
        (function(i){         //自执行函数会直接把i值保存起来           
            aLi[i].onclick= function () {
                for(var j=0; j<aDiv.length; j++){
                    aDiv[j].style.display="none"; //清除div样式
                }
                aDiv[i].style.display="block"; //给当前的div盒子赋样式

            }
        })(i);

    }

</script>

</body>
</html>

tab切换 原生js的更多相关文章

  1. 可重复使用Tab切换代码和纯js代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Tab选项卡切换卡JS效果

    <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...

  3. 几个不同的tab切换示例

    上一篇<论tab切换的几种实现方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿”中国人民大学“官网的tab切换,背景是图片,效果图如下 ...

  4. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  5. 原生js实现tab切换

    //通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...

  6. 原生JS实现tab切换--web前端开发

    tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...

  7. 几种tab切换尝试 原生js

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

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

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

  9. 原生js实现随着滚动条滚动，导航会自动切换的效果

    最近学习前端,把前面用原生js写的一段有关tab切换效果的代码贴上,实现的效果比较简陋,请大家见谅 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

随机推荐

  1. PHP:第一章——PHP中的变量002

    预定义变量.变量的有效范围.可变变量.静态变量.php之外的变量 <?php /*****************************************************/ // ...

  2. CPU、GPU、CUDA、cuDNN

    CPU擅长逻辑处理控制,GPU适合高强度的并行计算任务,为什么会存在这种差别?今天搜集了些相关资料,摘抄总结如下. 一.什么是GPU GPU这个概念是由Nvidia公司于1999年提出的.GPU是显卡 ...

  3. Spring Boot ：邮件服务

    简单使用 1.pom 包配置 pom 包里面添加 spring-boot-starter-mail 包引用 <dependencies> <dependency> <gr ...

  4. echarts 自适应方法 x和y x2和y2

    grid:{ x:65, y:20, x2:30, y2:30},

  5. java 面试题2

    Java 模拟面试题 1.面向对象的特点 继承,封装,多态 2.对象和类的区别是什么? 对象是对客观事物的抽象,类是对对象的抽象.类是一种抽象的数据类型,它们的关系是,对象是类的实例,类是对象的模板. ...

  6. 关于input

    form表单的使用: 1.iuput:type:类型有很多常用的: text:输入的内容为文本格式(内容可见) password:输入的内容为......(内容不可见) radio:显示为单选框(框为 ...

  7. 常见IO模型

    在socket的通信中,recv,accept,recvfrom(UDP协议接收信息)这些阶段由于需要收到信息,才能继续下面的代码,所以这些阶段叫做阻塞,类似于我们python变成中的input函数, ...

  8. Python类之类的成员

    对于一个学C++的朋友来说,Python类中,哪些是私有成员,哪些是共有成员,估计一直傻傻分不清. 一.本篇博客要解决的问题: Python类中,哪些是私有成员?哪些是共有成员? 二. 关于Pytho ...

  9. springboot 多端口启动

    以eclipse(STS)为例, 选中项目右键Run Configurations 点击Spring Boot App,选中需要设定多端口项目,在启动参数一栏输入:-Dserver.port=7003 ...

  10. springboot+mybatis+thymeleaf项目搭建及前后端交互

    前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...