<!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. Spring MVC及与structs MVC对比

    一.Spring MVC MVC: Model + View + Controller(数据模型+视图+控制器) 三层架构: Presentation tier + Application tier ...

  2. reduced penetrance|COPE-PCG

    生物医学大数据 Case study 由Human genome project提出之后,提出的精准医学.它的初衷是将数据standard后easy应用,我国重要重在疾病预警和疗效评价. 在疾病预警上 ...

  3. win10安装3DMAX失败，怎么强力卸载删除注册表并重新安装

    一些搞设计的朋友在win10系统下安装3DMAX失败或提示已安装,也有时候想重新安装3DMAX的时候会出现本电脑windows系统已安装3DMAX,你要是不留意直接安装3DMAX,只会安装3DMAX的 ...

  4. python3多进程爬虫（第二卷）

    上卷中讲到,我有4个进程,可是我要同时爬取20+数据怎么办,很明显上卷的语法公式不可以,所以现在我引入线程池 现在看一下线程池的语法 看一下爬虫: 注意圈中重点

  5. JSP9个内置对象和3个常用指令

    一.9个内置对象: 1.request对象客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.2.response对象包含了响应客户请求的有关信息,但在JSP中很少 ...

  6. MIUI 7 会是小米的救命稻草吗？

    7 会是小米的救命稻草吗?" title="MIUI 7 会是小米的救命稻草吗?"> 花无百日红,人无千日好.再绚烂的曾经,或许一朝不慎,就会成为过去.在科技圈,诺 ...

  7. Ubuntu 16.04 PXE+kickstart部署系统

    #PXE+TFTP+Kickstart 自动部署服务器系统系统Ubuntu16.04apt-get install isc-dhcp-servervim /etc/default/isc-dhcp-s ...

  8. BFC 浅谈

    写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...

  9. pymongo bugfix后记

    有网友反馈py-mongo-sync同步异常,检查发现curosr[0]取查询结果第一个文档时报错"no such item for Cursor instance". 这里的逻辑 ...

  10. Leetcode 703题数据流中的第K大元素（Kth Largest Element in a Stream）Java语言求解

    题目链接 https://leetcode-cn.com/problems/kth-largest-element-in-a-stream/ 题目内容 设计一个找到数据流中第K大元素的类(class) ...