方法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. css解决方案之css布局

    固定宽度布局解决方案 固定宽度的居中布局 首先我们这里探讨的是我们常用的固定宽度的居中布局,这应该是目前实战中应用的最多的了. 然后从考虑是否应用大背景上我们分为两种,一种是允许整体有一个大背景,一种 ...

  2. iOS定位服务CoreLocation

    欢迎訪问我的新博客: 开发人员说 基于LBS的应用开发是当今移动开发中的一大热门, 当中主要涉及到地图和定位两个方面. iOS开发中, 定位服务依赖于CoreLocation框架, CLLocatio ...

  3. eclipse git拉取完代码后怎么maven构建

    这个参考下:https://jingyan.baidu.com/article/414eccf64d29bc6b431f0ade.html 没试过上面的,反正git后的文件夹非空,用maven创建会失 ...

  4. NIO之阻塞IO与非阻塞IO（包含Selector使用）

    阻塞IO 传统的 IO 流都是阻塞式的. 也就是说,当一个线程调用 read() 或 write()时,该线程被阻塞,直到有一些数据被读取或写入,该线程在此期间不能执行其他任务. 因此,在完成网络通信 ...

  5. 李洪强iOS开发之OC语言前期准备

    OC语言前期准备 一.OC简介 Oc语言在c语言的基础上,增加了一层最小的面向对象语法,完全兼容C语言,在OC代码中,可以混用c,甚至是c++代码. 可以使用OC开发mac osx平台和ios平台的应 ...

  6. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  7. log4j日志写入数据库

    # log4j写入数据库 ### 前言-----------------------------log4j是写入日志到控制台和文件很常见,但是写入到数据库不多见.做性能测试写入到数据库,统计方便些. ...

  8. imx6 uboot启动流程分析

    参考http://blog.csdn.net/skyflying2012/article/details/25804209 这里以imx6平台为例,分析uboot启动流程对于任何程序,入口函数是在链接 ...

  9. linux list

    一篇介绍链表不错的文章: 1. 玩转C链表 2. openwrt使用list 3. 深入分析 Linux 内核链表 https://www.ibm.com/developerworks/cn/linu ...

  10. RTT常用数据类型

    RTT常用数据类型定义在rtdef.h中 /* RT-Thread basic data type definitions */ typedef signed char rt_int8_t; /**& ...