方法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. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览 client对象模型API范围

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览 client对象模型API范围         本章之前提到过. ...

  2. cygwin开发环境搭建与apt-cyg的应用

    1.Cygwin安装 http://www.cygwin.com/下载安装工具 详细安装过程參照http://jingyan.baidu.com/article/6b97984d83dfe51ca2b ...

  3. Ireport常用操作汇总

    1.四则运算 new java.lang.Double(($F{fincome}.doubleValue())/($F{fhomePopulation}.intValue()))

  4. 摄像头驱动_摄像头驱动程序必需的11个ioctl及摄像头数据的获取过程

    摄像头驱动_摄像头驱动程序必需的11个ioctl及摄像头数据的获取过程 根据虚拟驱动vivi的使用过程彻底分析摄像头驱动// 1~2都是在v4l2_open里调用1. open2. ioctl(4, ...

  5. 234. Palindrome Linked List【easy】

    234. Palindrome Linked List[easy] Given a singly linked list, determine if it is a palindrome. Follo ...

  6. 1. Two Sum【easy】

    1. Two Sum[easy] Given an array of integers, return indices of the two numbers such that they add up ...

  7. 如何给unity3d工程加入依赖的android工程

    最近在忙着接平台的事,需要接入各种各样的android平台sdk来发布.在接sdk的时候遇到了这样的一个情况,有点麻烦,所以纪录一下. 有些sdk的接入是提供jar包,这样的可以简单地将jar包制作成 ...

  8. 设置一个label显示多种颜色，多种字体大小

    UILabel* label = [[UILabel alloc] init]; label.frame = CGRectMake(0, 100, 200, 100); label.textColor ...

  9. FastDFS单机搭建以及java客户端Demo

    http://blog.csdn.net/u012453843/article/details/69951920 http://blog.csdn.net/xyang81/article/detail ...

  10. 集合Set映射一对多（使用xml文件）

    如果持久化类设置了包含实体引用的对象,则需要使用一对多关联来映射集合(Set)元素. 我们可以通过任意一个Set集合来映射这个列表对象. 下面来看看看设置对象的持久化类. 在这种情况下,一个问题可以有 ...