<!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. python2.x 与 python3.x的不同

    python2.x 与 python3.x 的区别: 1. python2.x 的源码编码不规范,源码重复较多:python3.x 的源码编码规范,清晰.优美.简单 2. python2.x的默认字符 ...

  2. SiteMesh3简介及使用

    所属专栏: Java开发经验记录   最近项目用到SiteMesh3,研究学习一段时间后决定写篇博文来记录收获. SiteMesh SiteMesh 介绍 工作原理 配置及使用 下载 1添加maven ...

  3. MYSQL查询操作 详细

    学习目标 1 掌握select查询所有字段.指定字段的数据 2 掌握消除重复行命令distinct 3 掌握as给字段.表起别名 4 掌握条件查询where后跟比较运算符.逻辑运算符的用法 5 掌握条 ...

  4. 用工具metaseeker写简单爬虫（1）

    1.下载metaseeker(一款比较实用的网站数据采集程序) 2.将所要爬取的网页复制到网址里,按回车.我选择的是当当网新书排行榜页面,标2的地方表示已经导入到软件里了. 3.命名主题,查重,查看是 ...

  5. Python爬虫入门之Cookie的使用

    本节我们一起来看一下Cookie的使用. 为什么要使用Cookie呢? Cookie,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密) 比如说有些网站需要 ...

  6. java并发实战-基础知识

    1.线程安全 共享:变量可以由多个线程同时访问.可变:变量值在生命周期内可以变化. 当多个线程访问某个类时,这个类始终都能表现出正确的行为,称这个类是线程安全的. 无状态对象是线程安全的. 2.原子性 ...

  7. 【webpack学习笔记】a06-生产环境和开发环境配置

    生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间. 而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新. 所以可以分开配置不同的开发环境,然后 ...

  8. 用vector与bitset分别创建1亿以内的素数表,比较快慢

    vector容器: 代码如下: #include<iostream>#include<vector>#include<ctime>using namespace s ...

  9. Curve 曲线 工具

    最近研究了曲线绘制的工具,主要是2D方程的绘制.综合了许多工具,完成了一下两个脚本. 绘制的工具: using UnityEngine; using System.Collections; using ...

  10. 关于iptables添加规则不生效的问题

    原文:https://blog.csdn.net/donglynn/article/details/73530542 1.我们要增加的规则是:-A INPUT -p tcp -m state --st ...