<!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. 版本管理工具小乌龟TortoiseGit的安装和使用(1)

    1.软件的安装:1.1 安装 Git使用软件管理工具搜索 Git:

  2. Android开发笔记---adb命令

    adb命令的使用: adb shell命令:pm list packages -f:显示包名称及相应的APK文件

  3. POJ - 3264——Balanced Lineup（入门线段树）

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 68466   Accepted: 31752 ...

  4. PC/FORTH 下的多任务使用

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  5. 数据库数据迁移 SqlServer复制到mysql

    经过一番搜索,有朋友推荐用datax的,后来发现比较麻烦,需要循环每个表去复制:有推荐用Navicat的,但是方式有点行不通,会报文件打不开:无法打开Provider=SQLNCLI10.1;Pers ...

  6. php短信验证码接口接入流程及代码示例

    对于绝大部分企业来说,所使用的短信验证码接口都是第三方短信服务商所提供,目前市场上短信服务商有很多,在此向大家推荐一家动力思维乐信,运营13年,值得信赖! 就拿动力思维乐信短信验证码接口为例,详细介绍 ...

  7. springboot快速开发（简单web）

    这是一个springboot基础配置文件介绍的demo.只涉及到 控制层与前端的简单交互,用于验证代码的畅通. spring-boot  pom.xml解释 <?xml version=&quo ...

  8. 【转】Linux的nm查看动态库和静态库的符号

    转自https://blog.csdn.net/qq_16683355/article/details/52297884 功能 列出.o..a..so中的符号信息,包括符号的值,符号类型及符号名称等. ...

  9. AutoCAD 2019.0.1 Update 官方简体中文版

    欧特克三维机械设计软件AutoCAD 2019版本于2018年3月23号全球正式发布,新版本图标全新设计,视觉效果更清晰:在功能方面,全新的共享视图功能.DWG文件比较功能:现在打开及保存图形文件已经 ...

  10. jQuery的 ready() 和原生 Js onload() 的主要区别：

    1. onload() 会等到DOM 元素和图片都加载完毕后才执行:raeady()会等到DOM元素加载完毕,但不会等到图片加载完毕就会执行. 2.onload() 如果编写了多个,则后面的会覆盖掉前 ...