<!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. webpack中使用ECharts

    npm安装ECharts 引入ECharts 通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下.可以直接在项目代码中 require('echarts' ...

  2. SHELL用法一（基本概念）

    1. SHELL 编程概念入门 1)一个完整 Linux 操作系统(Linux 内核),默认用户是不能直接操作 Linux 内核,需要借助第三方的程序或者软件去操作,例如桌面工具.命令行工具(SHEL ...

  3. 升级本地已安装的 Node 和 npm 版本

    Mac升级本地已经安装的NodeJs和Npm到最新版,可以使用一下方式进行升级和更新. 其实windos上升级nodejs也很简单,只需在nodejs官网下载安装最新的msi即可. 值得注意的是安装时 ...

  4. 通过命令行创建Django项目

    只有安装的是pycharm专业版才可以直接在pycharm面板中直接创建Django项目 如果不是专业版,可以通过命令行创建Django项目 https://www.cnblogs.com/jiare ...

  5. PHP PSR-2 代码风格规范

    代码风格规范 本篇规范是 PSR-1 基本代码规范的继承与扩展. 本规范希望通过制定一系列规范化PHP代码的规则,以减少在浏览不同作者的代码时,因代码风格的不同而造成不便. 当多名程序员在多个项目中合 ...

  6. 将本地的一个项目托管到自己的GitHub仓库

    GitHub作为全球最大的代码托管平台,功能十分强大.我们可以在上面建立一个仓库来托管我们的代码图片等资源.因为使用markdown语法来写博客所以在插入图片时需要一个图片外链地址,起初去网上找了一个 ...

  7. EL表达式详细教程

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...

  8. Luogu_2279_[HNOI2003]消防局的设立

    题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成了一个巨大的树状 ...

  9. fastDFS 一二事 - 简易服务器搭建之--阿里云

    第一步:安装fastDFS依赖libevent工具包 yum -y install libevent 第二步:解压libfastcommon-1.0.7.tar.gz文件 tar -zvxf libf ...

  10. mysql-5.7.25解压版本安装和navicat 12.1版本破解-4.8破解工具

    1.配置环境变量 百度网盘下载https://pan.baidu.com/s/1tbOJiOG9l87HbIzsLApX4A 提取码  t657  (mysql-5.7.25大小300M解压后1.6G ...