方法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. IOS 多播委托(GCDMulticastDelegate)

    原文:http://www.cnblogs.com/dagehaoshuang/p/4043264.html 在IOS中为了实现回调一般有如下几个方法: delegate 通知中心 block KVO ...

  2. CentOS 7 中 Docker 的安装和卸载

    安装Dokcer Docker 软件包已经包括在默认的 CentOS-Extras 软件源里.因此想要安装 docker,只需要运行下面的 yum 命令: [root@localhost ~]# yu ...

  3. 【精】iOS GCD 具体解释

    一.介绍 1.什么是GCD? Grand Central Dispatch.是苹果公司开发的一套多核编程的底层API. GCD首次公布在Mac OS X 10.6,iOS4及以上也可用.GCD存在于l ...

  4. php对象序列化总出错false

    php unserialize 返回false的解决方法 php 提供serialize(序列化) 与unserialize(反序列化)方法. 使用serialize序列化后,再使用unseriali ...

  5. 经常使用传感器协议3：CJ/T-188 冷热量表协议解析2

        本文详细阐述JY公司冷热量表(记热量)传输协议.并以此说明CJ/T-188协议在厂家详细应用时,并不一致. 本文及兴许文章将对这些不同点予以总结(文中所述协议与日志"CJ/T-188 ...

  6. Atitit. 包厢记时系统 的说明，教程，维护，故障排查手册v2 pb25.doc

    Atitit. 包厢记时系统 的说明,教程,维护,故障排查手册v2 pb25.doc 1. 服务器方面的维护1 1.1. 默认情况下,已经在系统的启动目录下增加了 个启动项目1 1.2. 后台服务.保 ...

  7. atitit.人脸识别的应用场景and使用最佳实践 java .net php

    atitit.人脸识别的应用场景and使用最佳实践 java .net php 1. 人脸识别的应用场景1 2. 标准化的api1 3. 框架选型 JNI2OpenCV.dll and JavaCV ...

  8. Log4j学习（使用流程，Log4j.properties配置文件，配置到多个不同目标）

    参考网址: [http://blog.csdn.net/drift_away/article/details/7403658] [http://blog.csdn.net/lxzo123/articl ...

  9. 74. First Bad Version 【medium】

    74. First Bad Version [medium] The code base version is an integer start from 1 to n. One day, someo ...

  10. php类库PHP QR Code 二维码

    php类库PHP QR Code 二维码 php类库PHP QR Code 二维码 php类库PHP QR CodePHP QR Code is open source (LGPL) library ...