<!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. flask基础--第二篇

    1.Flask中的HTTPResponse,Redirect, render #导入render_template和redirect from flask import Flask,render_te ...

  2. 颜色表 及 p em fr

      #000000   #2F0000   #600030   #460046   #28004D   #272727   #4D0000   #820041   #5E005E   #3A006F ...

  3. Java调用第三方接口工具类（json、form）

    1.JSON值访问 /** * 调用对方接口方法 * @param path 对方或第三方提供的路径 * @param data 向对方或第三方发送的数据,大多数情况下给对方发送JSON数据让对方解析 ...

  4. node-express-2-jade

    1,Jade里可以省略尖括号,直接写标签名 2,标签间的嵌套关系用换行加空格来实现 3,紧接在标签名后加上.xx或#xx,就能给标签添加css类名和id,如果不写标签名默认就是div 4,标签属性写入 ...

  5. asp解码.net传参

    get传参时 asp默认使用gbk解码?了解的朋友指点下,谢谢 .net向asp传参时注意urlencode加密编码使用gb2312 附:任何语言的数据交互都要确保接收双方的编码一致

  6. Tasklist使用详解

    用jstat查看jvm内存的使用的情况时,因为是windows机器,不能使用top命令方便的查出来,进程好在网上搜了一下看到了在windows原来使用的是tasklist 特意将tasklist的用法 ...

  7. SSH整合后tomcat启动报错SEVERE: Exception starting filter struts2 java.lang.NoClassDefFoundError: org/objectweb/asm/ClassVisitor

    错误信息:  SEVERE: Exception starting filter struts2 java.lang.NoClassDefFoundError: org/objectweb/asm/C ...

  8. Python_day1 Learning record

    Python Day1 Learning record(python第一天学习记录) 一.ptyhon安装 windows .下载安装包 https://www.python.org/download ...

  9. Vue源码之 Vue的生命周期

    天地初开就是new Vue(options),里面就一句话 this._init(options); (Vue.prototype.init 的赋值在initMixin(Vue)方法里) _init方 ...

  10. JDBC学习DayOne

    一.相关概念 1.JDBC的定义 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它 ...