方法一、主要使用了传递参数的思想，把循环变量不能使用转换了一下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav{
            width: 100%;
            height: 50px;
            text-align: center;
        }
        .nav li{
            display: inline-block;
            padding-left: 20px;
            padding-right: 20px;
            list-style: none;
            background: red;
            color: #fff;
            text-align: center;
            height: 50px;
            width: 100px;
            line-height: 50px;
            border-radius: 10px;
        }
        .container{
            width: 100%;
            height: 400px;
            background: #cccccc;
            border-radius: 20px;
            text-align: center;
            line-height: 400px;
        }
        .container div{
            position: absolute;
            /*background: #fff;*/
            width: 80%;
            left: 10%;
            top: 15%;
            height: 300px;
            margin: 0 auto;
            border-radius: 20px;
            /*display: none;*/
        }
        .show{
            z-index: 99;
            background: #cc6600;
            color: #fff;
        }
        .hide{
            /*display: none;*/
            z-index: 0;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>导航一</li>
            <li>导航二</li>
            <li>导航三</li>
            <li>导航四</li>
            <li>导航五</li>
        </ul>
    </div>
    <div class="container" id='container'>
        <div class='show'>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
        <div>内容四</div>
        <div>内容五</div>
    </div>
</body>
<script>
    window.onload=function(){
//        1、获取触发事件的元素
        var oli = document.getElementsByTagName('li');
        for (var i = 0; i < oli.length; i++) {
//            2、给触发元素添加触发事件
            oli[i].onmouseover=function(){
//                3、调用函数，执行事件
                    change(this);
            }
        }
        function change(obj){
            var oli = document.getElementsByTagName('li');
            var container = document.getElementById('container');
            var oDiv = container.getElementsByTagName('div');
            for (var  i= 0;  i< oli.length; i++) {
                if(oli[i]==obj){
                    oDiv[i].className='show';
                }else{
                    oDiv[i].className ='hide';
                }
            }
        }
    }
方案二、排他思想和对象思想
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 100%;
            margin: 0 auto;
        }
        .body{
            background: #cc6600;
            width: 100%;
            height: 500px;
        }
        .body div{
            position: absolute;
            background: #fff;
            width: 50%;
            height: 50%;
            left: 25%;
            top: 25%;
            display: none;
        }
        .body div.show{
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <button>导航一</button>
        <button>导航二</button>
        <button>导航三</button>
        <button>导航四</button>
        <button>导航五</button>
        <button>导航六</button>
    </div>
    <div class="body" id='body'>
        <div class='show'>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
        <div>内容四</div>
        <div>内容五</div>
        <div>内容六</div>
    </div>
</body>
<script>
    window.onload=function(){
//        1、获取元素
        var btns = document.getElementsByTagName('button');
        var body = document.getElementById('body');
        var oDiv = body.getElementsByTagName('div');
//        2、遍历元素
        for(var i = 0;i<btns.length;i++){
//            6、自定义属性，使触发元素与目标元素相关联
            btns[i].index=i;
//            3、添加事件
            btns[i].onclick=function(){
//                4、遍历清除样式
                for (var  i= 0;  i< btns.length; i++) {
                    btns[i].className='';
                    oDiv[i].className='';
                }
//                5、给目标元素设置样式
                oDiv[this.index].className='show';
            }
        }
    }
</script>
</html>

tab切换的两种方法的更多相关文章

  1. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  2. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  3. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  4. Linux安装MySQL的两种方法

    转载:http://blog.csdn.net/superchanon/article/details/8546254/ 1.       运行平台:CentOS 6.3 x86_64,基本等同于RH ...

  5. hive权威安装出现的不解错误！（完美解决）两种方法都可以

    以下两种方法都可以,推荐用方法一! 方法一: 步骤一: yum -y install mysql-server 步骤二:service mysqld start 步骤三:mysql -u root - ...

  6. Response.Redirect 打开新窗体的两种方法

    普通情况下,Response.Redirect 方法是在server端进行转向,因此,除非使用 Response.Write("<script>window.location=' ...

  7. android fragment传递参数_fragment之间传值的两种方法

    在Activity中加载Fragment的时候.有时候要使用多个Fragment切换.并传值到另外一个Fragment.也就是说两个Fragment之间进行参数的传递.查了很多资料.找到两种方法.一种 ...

  8. Response.Redirect 打开这两种方法的一种新形式

    在一般情况下.Response.Redirect 该方法是在server年底转向,因此,除非 Response.Write("<script>window.location='h ...

  9. 两种方法上传本地文件到github

    https://www.jianshu.com/p/c70ca3a02087 自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的 ...

随机推荐

  1. a==null和a.equals("null")的区别

    equals 是值比较,==是比较内存 A==B,比较句柄,就是比较变量A,B的地址存放的东西,比如int A=0;String B="bbbb";那么变量A的地址方的就是0,B的 ...

  2. Codeforces Round #383 _python作死系列

    A. Arpa's hard exam and Mehrdad's naive cheat 题意求1378的n次方的最后一位,懒的写循环节 瞎快速幂 py3 int和LL 合并为int了 def q_ ...

  3. C#动态执行字符串(动态创建代码)

    在编写C#程序的时候,有时我们需要动态生成一些代码并执行.然而C#不像JavaScript有一个Eval函数,可以动态的执行代码.所有这些功能都要我们自己去完成.如下是实例. 动态创建代码: usin ...

  4. Easyui 关闭弹出框后还显示验证提示信息

    今天下午做form表单,然后可以保存,可以关闭.可是关闭的时候老是会在屏幕左上角显示验证提示框,很是着急. 如图: 可能是easyui自己框架的问题,或许是因为网上有的人,自己代码写得有问题,没有调试 ...

  5. net SqlBulkCopy拷贝数据的问题

    服务器配置:windows 2008 ,sql server 2008, oracle 10g. 在本地和同样配置的其他服务器上同样的程序,数据200万都很快就采集过来了,但是在发布的服务器上,如果b ...

  6. Vrapper-Eclipse的vim插件安装方法

    Vrapper是一款Eclipse的插件,使在Eclipse下编辑文档时可以像使用Vim一样. 它有两种安装方法,在线安装和安装包安装: 在线安装: 打开Eclipse,Help->Instal ...

  7. eclips android项目复制

    1.将要复制的项目从workspace里面copy到另外一个目录 2.将这个项目重命名 3.使用android tool 里的包名修改工具(rename appliction package),修改报 ...

  8. mysql innobackupex xtrabackup 大数据量 备份 还原

    大数据量备份与还原,始终是个难点.当MYSQL超10G,用mysqldump来导出就比较慢了.在这里推荐xtrabackup,这个工具比mysqldump要快很多. 一.Xtrabackup介绍 1, ...

  9. java里的分支语句--程序运行流程的分类(顺序结构,分支结构,循环结构)

    JAVA里面的程序运行流程分三大类: 1,顺序结构:顺序结构就是依次执行每一行代码 2,分支结构:分支结构就是按不同的条件进行分支 3,循环结构:一段代码依条件进行循环执行. 其中,分支结构有两大类: ...

  10. font-face跨域办法

    font-face是现在比较流行的技术,可以矢量化你的图标,更改颜色方便等等.如果你想更进一步了解他,请点击这里(CSS3 icon font完全指南)今晚有网友问到font-face跨域在nginx ...