<!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. Robot Framework自动化使用

    自动化测试框架---Robot Framework Robot Framework是用Python语言写的,所以在安装Robot Framework以前必须安装Python环境.Robot Frame ...

  2. Spring Boot：Web 综合开发

    Web 开发 Spring Boot Web 开发非常的简单,其中包括常用的 json 输出.filters.property.log 等 json 接口开发 在以前使用 Spring 开发项目,需要 ...

  3. css选择器权重问题

    important infinity 行间样式 1000(256进制) id 100 class/属性/伪类 10 标签/伪元素 1 通配符 0

  4. unity中的UGUI一些组件的使用

    一.Toggle Group(Script) LeftButtons上添加Toggle Group组件,属性Allow Switch Off打对勾,代表它的所有子物体上带有Toggle组件的属性Is ...

  5. 初学python类编的一个求矩形小程序

    简单的程序不简单,里面包含类定义类,传参,初始化,方法调用,创建实例,格式输出.主要在python中随时定义变量随时用,我这道题题想好久就是我初识类,传参,不是所有参数都的加单引号.简单的东西,复杂话 ...

  6. [数]青蛙的约会&Strange function

    拓展欧几里得:求导&二分 POJ-1061 拓展欧几里得的应用,需要开long long 第一次做这个题的时候进行了毫无用处的找公式(?),是个现在的我看不懂的迷之思路. 第二发的时候还是不明 ...

  7. nginx常用模块

    Nginx模块介绍 核心模块:core module 标准模块:stand modules HTTP modules: Standard HTTP modules Optional HTTP modu ...

  8. socket keepalive理解

    java socket编程中有个keepalive选项,看到这个选项经常会误解为长连接,不设置则为短连接,实则不然. socket连接建立之后,只要双方均未主动关闭连接,那这个连接就是会一直保持的,就 ...

  9. IRP小结 0x01 IRP & IO_STACK_LOCATION(结合WRK理解)

    写博客整理记录一下IRP相关的知识点,加深一下印象. 所有的I/O请求都是以IRP的形式提交的.当I/O管理器为了响应某个线程调用的的I/O API的时候,就会构造一个IRP,用于在I/O系统处理这个 ...

  10. ASP中替换掉换行符<br>

    function HtmlStrReplace(Str)  if Str="" or isnull(Str) then    HtmlStrReplace="" ...