方法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. Quartz简介 用 Quartz 进行作业调度

    http://www.ibm.com/developerworks/cn/java/j-quartz/现代的 Web 应用程序框架在范围和复杂性方面都有所发展,应用程序的每个底层组件也必须相应地发展. ...

  2. 在VS2013 IIS Express 添加MIME映射

    打开VS2013返回json提示MIME映射问题 1.在DOS窗口下进入IIS Express安装目录,默认是C:\Program Files\IIS Express,cmd  命令行cd 到 该目录 ...

  3. 浅谈js中继承的理解和实现

    一.前言 java.C#等正统面向对象语言都会提供类似extend之类的处理类的继承的方法,而javascript并没有提供专门的方法用于继承,在javascript中使用继承需要一点技巧.js中实例 ...

  4. 阿里云RDS备份的tar格式包恢复到本地自建数据库

    说明 阿里云RDS-mysql数据库是通过percona-Xtrabackup进行备份的,所以恢复时也需要安装该软件. 另外注意的是:你自己下载的MySQL版本要和阿里云上的MySQL版本一致,不然会 ...

  5. java-TransDemo

    字符串转换成其他基本类型,以及包装类的自动装箱.拆箱 package com.example; import java.util.Scanner; import java.lang.*; /** * ...

  6. SQL中使用视图的优点和缺点是什么

    视图的优点与缺点 在程序设计的时候必须先了解视图的优缺点,这样可以扬长避短,视图具有如下的一些优点: ● 简单性.视图不仅可以简化用户对数据的理解,也可以简化他们的操作.那些被经常使用的查询可以被定义 ...

  7. LeetCode543. Diameter of Binary Tree

    Description Given a binary tree, you need to compute the length of the diameter of the tree. The dia ...

  8. Java基础08 继承（转载）

    继承(inheritance)是面向对象的重要概念.继承是除组合(composition)之外,提高代码重复可用性(reusibility)的另一种重要方式.组合是重复调用对象的功能接口.继承可以重复 ...

  9. Linux Linux系统管理命令

    df 检测文件系统的磁盘空间占用和空余情况 --用于检测文件系统的磁盘空间占用和空余情况,可以显示所有文件系统对接点和磁盘块的使用情况 --df [参数] --常用参数及含义 "-a&quo ...

  10. bat脚本批处理打war打包

    @echo =========================================== @echo 描述:打包脚本 @echo 作者:霍建国 @echo 日期:2018-03-13 @ec ...