方法1:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            padding: 0;

            margin: 0;

        }

        ul {

            list-style: none;

        }

        #tab {

            width: 480px;

            margin: 20px auto;

            border: 1px solid red;

        }

        ul {

            width: 100%;

            overflow: hidden;

        }

        ul li {

            float: left;

            width: 160px;

            height: 60px;

            line-height: 60px;

            text-align: center;

            background-color: #cccccc;

        }

        ul li a {

            text-decoration: none;

            color: black;

        }

        li.active {

            background-color: lightpink;

        }

        p {

            display: none;

            height: 200px;

            line-height: 200px;

            text-align: center;

            background-color: lightpink;

        }

        p.active {

            display: block;

        }

    </style>

</head>

<body>

<div id="tab">

    <ul>

        <li class="active"><a href="#">首页</a></li>

        <li><a href="#">新闻</a></li>

        <li><a href="#">图片</a></li>

    </ul>

    <p class="active">首页内容</p>

    <p>新闻内容</p>

    <p>图片内容</p>

</div>

</body>

<script type="text/javascript">

    // 获取li标签,注意是复数

    var olis = document.getElementsByTagName('li');

    // 获取p标签,注意是复数

    var oPs = document.getElementsByTagName('p');

    // 循环li标签

    var i; // 变量提升

    for (i = 0; i < olis.length; i++) {

        // 保存i的变量,因为i为全局的,i最终为3-->(变量提升)

        olis[i].index = i;

        // 给每个li标签绑定事件

        olis[i].onclick = function () {

            // for循环清空之前属性

            for (var j = 0; j < olis.length; j++) {

                // 清楚li标签属性

                olis[j].className = '';

                // 清楚p标签属性

                oPs[j].className = ''

            }

            // 鼠标点击谁,谁就属性加上active

            this.className = 'active';

            oPs[this.index].className = 'active';

        }

    }

</script>

</html>

方法2:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            padding: 0;

            margin: 0;

        }

        ul {

            list-style: none;

        }

        #tab {

            width: 480px;

            margin: 20px auto;

            border: 1px solid red;

        }

        ul {

            width: 100%;

            overflow: hidden;

        }

        ul li {

            float: left;

            width: 160px;

            height: 60px;

            line-height: 60px;

            text-align: center;

            background-color: #cccccc;

        }

        ul li a {

            text-decoration: none;

            color: black;

        }

        li.active {

            background-color: lightpink;

        }

        p {

            display: none;

            height: 200px;

            line-height: 200px;

            text-align: center;

            background-color: lightpink;

        }

        p.active {

            display: block;

        }

    </style>

</head>

<body>

<div id="tab">

    <ul>

        <li class="active"><a href="#">首页</a></li>

        <li><a href="#">新闻</a></li>

        <li><a href="#">图片</a></li>

    </ul>

    <p class="active">首页内容</p>

    <p>新闻内容</p>

    <p>图片内容</p>

</div>

</body>

<script type="text/javascript">

    // 获取li标签,注意是复数

    let olis = document.getElementsByTagName('li');

    // 获取p标签,注意是复数

    let oPs = document.getElementsByTagName('p');

    // 循环li标签

    for (let i = 0; i < olis.length; i++) {

        // 给每个li标签绑定事件

        olis[i].onclick = function () {

            // for循环清空之前属性

            for (let j = 0; j < olis.length; j++) {

                // 清楚li标签属性

                olis[j].className = '';

                // 清楚p标签属性

                oPs[j].className = ''

            }

            // 鼠标点击谁,谁就属性加上active

            this.className = 'active';

            oPs[i].className = 'active';

        }

    }

</script>

</html>

javascript实例:两种方式实现tab栏选项卡的更多相关文章

  1. VS Code - Debugger for Chrome调试JavaScript的两种方式

    VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...

  2. svg中实现文字随曲线走向，HTML直接写和JavaScript创建对象两种方式

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  3. @Autowired获取配置文件中被注入实例的两种方式

    一.说明 二.那么在JavaBean中如何通过@Autowired获取该实例呢?有两种方式: 1.直接获取 @RunWith(SpringJUnit4ClassRunner.class) @Conte ...

  4. JavaScript对象属性访问的两种方式

    JavaScript对象属性访问的两种方式 object.attribute object["attribute"] 例如: var employees = [ { "f ...

  5. Flex（ActionScript）与JavaScript交互的两种方式示例

    随着各单位部门信息化进程的不断发展,互通互联.共享协调不断的被越来越多的客户所重视.很多新项目都要去必须能够集成已有的早期系统,至少也要能够实现交互对接.今天跟大家分享的是系统对接中ActionScr ...

  6. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  7. javascript消除字符串两边空格的两种方式，面向对象和函数式编程。python oop在调用时候的优点

    主要是javascript中消除字符串空格,比较两种方式的不同 //面向对象,消除字符串两边空格 String.prototype.trim = function() { return this.re ...

  8. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  9. javascript中实现sleep的两种方式

    最近在js中要使用到类似于C++中的sleep函数(让cpu休眠).但是js是不可能让cpu休眠,所以可以通过下面的两种方式模拟sleep函数. 方式一:使用setTimeout函数代替.如果在一个循 ...

随机推荐

  1. Intellij Idea 使用入门教程

    1.安装Idea Download: http://www.jetbrains.com/idea/download/#section=windows  (请下载UItimate) Lisense:  ...

  2. win8 应用商店。 app下载的音乐和视频软件能打开，不能正常播放 解决方法

    win8 应用商店.app下载的音乐和视频软件能打开,不能正常播放 安装完win8之后,下载了PPS,可以正常播放.但是过了几天之后,就不能播放了,又从网络上下载了其他的音乐和视频相关的软件, 都不可 ...

  3. JanusGraph的schema及数据建模

    每个JanusGraph都有一个schema,该schema由edge labels, property keys和vertex labels组成.JanusGraph的schema可以显式或隐式创建 ...

  4. Xcode, does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE) 解决办法

    在Build Settings中找到Enable Bitcode项,设置为如下: 参考:http://blog.csdn.net/soindy/article/details/48519363

  5. 关于http和rpc的区别（segmentfault上的回答）

    问题最近用了谷歌的grpc,所以对rpc和http有一点疑惑,感觉这两个东西功能上是一样的,rpc某个服务监听某一个方法,客户端调用这个方法,返回相应的数据,和http监听某个方法的路由 返回相应的数 ...

  6. [ElasticSearch] 空间搜索 （一）

    依据索引文档的地理坐标来进行搜索.Elasticsearch 也可以处理这种搜索.--空间搜索 一.为空间搜索准备映射 PUT my_space_test { "mappings" ...

  7. UML类图详解_关联关系_多对多

    在关联关系中,很多情况下我们的多重性并不是多对一或者一对多的,而是多对多的. 不过因为我们要考虑里面的导航性,如果直接搞的话就是需要去维护两群对象之间多对多的互指链接,这就十分繁杂且易错.那么我们怎么 ...

  8. 李洪强漫谈iOS开发[C语言-003]-开发概述程序设计语言

    李洪强iOS开发之程序设计语言 printf 是打印的意思- 格式化输出 f: format 格式化 C语言编译器 编译器的功能就是将高级语言的源代码,翻译成机器可以识别的二进制文件就是可执 行文件- ...

  9. objc_runtime使用方法的几个简单例子(转)

    1. 给NSObject类动态添加属性h定义部分 [cpp] @interface UIWebView (LoadProgress)  @property (nonatomic, assign) NS ...

  10. 【转】在Eclipse中使用JUnit4进行单元测试（初级篇）

    http://www.builder.com.cn/2007/0901/482336.shtml 首先,我们来一个傻瓜式速成教程,不要问为什么,Follow Me,先来体验一下单元测试的快感! 首先新 ...