<!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. [LC] 91. Decode Ways

    A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...

  2. ionic2踩坑之兼容android4.3及以下版本

    一个命令就行了 ionic plugin add cordova-plugin-crosswalk-webview --save 执行完之后重新打包. 但是如果要兼容4.0及以下的话.... 帮不了你 ...

  3. HttpClient-get请求/Post请求/Post-Json/Header

    1.Pom文件添加httpClient 依赖 <dependency> <groupId>org.apache.httpcomponents</groupId> & ...

  4. 三分钟学会使用Derby数据库

    Derby数据库是一个纯用Java实现的内存数据库,属于Apache的一个开源项目.由于是用Java实现的,所以可以在任何平台上运行:另外一个特点是体积小,免安装,java1.6开始集成了derby数 ...

  5. pipe 导致的 CLOSE_WAIT :: Utop's Blog

    历时一周总算把导致服务大量 CLOSE_WAIT 的原因给找到了.打印任务调用栈果然的必备手段啊! 问题描述 Python 服务 A,用于接收心跳包确认其他服务是否存活.其他服务每 5 分钟向 A 发 ...

  6. google搜索运算符+101个Google技巧 - Google技巧的终极收集

    下面内容整理自网络 搜索运算符 如果您使用我们的基本搜索技巧后,并未找到想要搜索的内容,可以尝试使用搜索运算符.您只需在 Google 搜索框中将这些符号或字词添加到搜索字词中,即可更好地掌控要显示的 ...

  7. Problem 43 // Project Euler

    Sub-string divisibility The number, 1406357289, is a 0 to 9 pandigital number because it is made up ...

  8. 创建Cocoapods私有库

    本文以自己在公司做的一个手势密码私有库GesturePasswordKit为例说明. 1.在gitlab(或者github,我这里使用的例子是在gitlab上)上创建git仓库 (确保授权正确,避免后 ...

  9. Mongo Delete-19

    数据初始化 db.inventory.insertMany( [ { item: "journal", qty: 25, size: { h: 14, w: 21, uom: &q ...

  10. PHP正则表达式-修饰符

    我们在PHP正则表达式的学习中会碰到修饰符,那么关于PHP正则表达式修饰符的理解以及使用我们需要注意什么呢?那么我们来具体的看看它的概念以及相关内容.在学习PHP正则表达式修饰符之前先来理解下贪婪模式 ...