<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

    body,ul{margin:0;padding:0;}

    li{list-style:none;}

    #tab{width:216px;margin:30px auto;}

    #tab ul{width:216px;height:32px;}

    #tab li{float:left;width:60px;height:24px;text-align:center;font-size:14px;line-height:24px;margin-left:10px;border:1px solid #000;background:#CCCCCC}

    #tab .active{background:#FFFF00;}

    #tab div{width:224px;height:200px;background:#CCCCCC;display:none;}

    #tab .show{display:block;}

</style>

<script>

    window.onload =function(){

        var oDiv = document.getElementById('tab');

        var aLi = oDiv.getElementsByTagName('li');

        var aDiv = oDiv.getElementsByTagName('div');

        var lastIndex = 1;

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

            aLi[i].index = i;

            aLi[i].onclick = function(){

                /*方法-

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

                    aLi[j].className = '';

                    aDiv[j].style.display = 'none';

                }

                */

                /*方法二*/

                aLi[lastIndex].className = '';

                aDiv[lastIndex].style.display = 'none';

                this.className  = 'active';

                aDiv[this.index].style.display = 'block';

                lastIndex = this.index;

            };

        }

    };

</script>

</head>

<body>

<div id='tab'>

    <ul>

        <li>port端口</li>

        <li class='active'>静态Mac</li>

        <li>vlan列表</li>

    </ul>

    <div class='hide'>interface gig1/1/1</div>

    <div class='show'>mac 0001.0002.0004</div>

    <div class='hide'>vlan 1 2 3</div>

</div>

</body>

</html>

js 实现简单的选项卡的更多相关文章

  1. JS入门学习，写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  2. Jquery简单的选项卡实现

    概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...

  3. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  4. 三行Jquery代码实现简单的选项卡

    今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...

  5. react做的简单的选项卡

    ### 首先安装react的脚手架 cnpm    install   create-react-app   -g    只需要在电脑下载安装一次即可  ###创建项目 create-react-ap ...

  6. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  7. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  8. Sea.js提供简单、极致的模块化开发体验

    为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...

  9. 投票系统 & js脚本简单刷票

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 【Linux_Shell 脚本编程学习笔记一、条件表达式】

    条件表达式返回的结果都为布尔型 真为1,假为0 条件测试的表达式 [expression] 比较符 整数比较 -eq:比较两个整数是否相等,$A -eq $B -ne:测试两个整数是否不等,不等则为真 ...

  2. Spring 插件安装

    文件下载:https://pan.baidu.com/s/1jIBOggm 网站下载:http://dist.springsource.com/release/TOOLS/update/e4.5/

  3. tomcat启动后access error[730048]的解决方法

    安装了JDK... 配置了系统变量... 解压了tomcat... 配置了系统变量... 点击startup.bat启动了以后,打开浏览器,出现access error 404错误. 仔细看过控制台输 ...

  4. 创业的游戏 明星APP上市前后的冰火两重天

    明星APP上市前后的冰火两重天" title="创业的游戏 明星APP上市前后的冰火两重天"> 当下,似乎只有创业才是能够实现笑看风云变幻的那条"黄金通道 ...

  5. BufferedReader中文乱码解决

    做一个从windows cmd截获命令返回值的java程序,结果截回来的文字中所有的中文都是乱码 Microsoft Windows [�汾 6.1.7260] ��Ȩ���� (c) 2009 Mi ...

  6. 【转载】Scrapy安装及demo测试笔记

    Scrapy安装及demo测试笔记 原创 2016年09月01日 16:34:00 标签: scrapy / python   Scrapy安装及demo测试笔记 一.环境搭建 1. 安装scrapy ...

  7. ubuntu采用apt-get安装pure-ftpd

    apt-get install pure-ftpdcd /etc/pure-ftpd/auth #开启虚拟账户登陆;ln -s 60auth ../conf/PureDB 60auth #查看虚拟账户 ...

  8. Book. Effective C++ item2-尽量使用const, enum, inline替换#define

    ##常规变量 c++里面的#define后面的定义部分,是不算代码的一部分的.所以如果你使用#define: #define ASPECT_RATIO 1.653 你希望这个代号ASPECT RATI ...

  9. Qt类声明中Q_OBJECT的作用与报错解决

    2017-06-22 周四 大雨 北京 院里 新建作图类,继承自QCUstomPlot类 因为需要同时作8张图,都要单坐标缩放的功能,因此想干脆新建一个类,继承自QCUstomPlot,把需要的功能都 ...

  10. Leetcode 206题 反转链表（Reverse Linked List）Java语言求解

    题目描述: 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 迭代解 ...