普通版选项卡

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            padding:0;            margin:0;            list-style: none;        }        #box1{            width:500px;            height:500px;            border:1px solid red;        }        #box1 input{            background: yellow;        }        #box1 .active{            background: red;        }        #box1 div{            width:300px;            height:300px;            background: red;            font-size: 50px;            text-align: center;            line-height: 300px;            display: none;        }        #box1 .show{            display: block;        }    </style></head><body>    <div id="box1">        <input type="button" value="按钮1" class="active">        <input type="button" value="按钮2">        <input type="button" value="按钮3">        <div class="show">1</div>        <div>2</div>        <div>3</div>    </div>    <script>        var oBox = document.getElementById(‘box1‘);        var aBtn = oBox.getElementsByTagName(‘input‘);        var aBox = oBox.getElementsByTagName(‘div‘);        for(var i=0; i<aBtn.length; i++){            aBtn[i].index = i;            aBtn[i].onclick = function () {                for(var i=0; i<aBtn.length; i++){                    aBtn[i].className = ‘‘;                    aBox[i].className = ‘‘;                }                aBox[this.index].className = ‘show‘;                this.className = ‘active‘;            }        }    </script></body></html>
时间: 2024-10-29 03:45:24

普通版选项卡的相关文章

面向对象版选项卡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; list-style: none; } #box1,#box2,#box3{ width:500px; height:500px; border:1px so

angular版选项卡

<!DOCTYPE html><html lang="en" ng-app="tab"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; list-style: none; } #box1{ width:500px; height:500px; bo

v-for列表实现选项卡切换进阶版

<div id="card"> <div class="title"> <span @click="num=key" :class="change(key)" v-for="title,key in title_list">{{title}}</span> </div> <div class="content"> &

选项卡包选项卡(传参)(无动画版)

一.效果图. 二.HTML+CSS. <style>*{ padding:0; margin:0; font-size:12px;}li{list-style:none;}a{ text-decoration:none;}.clear:after{content:'';display:block;clear:both;}.clear{zoom:1;} .box{ width:958px; border:1px solid #c6c6c6; height:328px; margin:90px a

WEB前端:01_Tab选项卡

Tab选项卡 采用两种方法实现选项卡切换功能,目前只提供了最基本的切换效果,后期增加jquery版和渐变切换效果. 效果图: 纯JS简化版: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <html> <head> <ti

Sublime Text 3 破解版 + 注册机 + 汉化包(转自 http://www.cnsecer.com/251.html)

Sublime Text就不用多做介绍了,官方最新发布了Sublime Text 3 Beta,价格却也飙到了70刀. 2013年5月10日更新 3033完美破解 大大的提高了启动速度 优化所有插件性能 界面管理增强 新增侧边栏预览选项卡 优化边栏动画 多个工作区可以共享同一个项目 从Python2.6升级到Python3.3 某些API事件现在以异步方式运行 新增window.settings()和window.template_settings() 语法高亮更新 修正Linux不兼容问题 修

C#版的抓包软件

C#版的抓包软件 [创建时间:2015-09-10 22:37:04] NetAnalyzer下载地址 不好意思啊,NetAnalyzer停更有点长了,今天继续填坑^&^ NetAnalyzer实现结构 在上一篇中介绍一点VC++开发环境的配置,与基本的运行方式.因为NetAnalyzer使用的C#作为开发语言,所以在此主要介绍一些在C#环境下的开发环境的配置,与一些基本开发情况,力求在完成本篇后后,读者可以制作一个简单的抓包程序. 在开始编程前先要介绍连个.Net类库SharpPcap.dll

server-U_汉化版详细教程

启动Serv-U adminisrator之后,出现如图界面,先看看"本地服务器"这个项目,如图,有个选项是"自动开始(系统服务)",选中后,Serv-U就把自己注册成系统服务,开机自动运行,而且在用户没有登录的情况下就开始运行了. 这里说说Serv-U的运行方式,看看安装后的根目录,有几个文件:ServUAdmin.exe是配置管理工具,ServUTray.exe是驻留系统托盘的工具,ServUDaemon.exe是Serv-U后台运行的守护程序.只要ServUD

免安装版Tomcat6.0启动方法

原文来源: tomcat下载地址才10M有点难以置信. 免安装版Tomcat6.0启动方法 1.下载Tomcat Zip压缩包,解压. 2.修改startup.bat文件: 在第一行前面加入如下两行 SET JAVA_HOME=JDK目录 SET CATALINA_HOME=前面解压后Tomcat的目录或者%cd% 如果需要使用shutdown.bat关闭服务器的话,也按照上面加入两行. 3.这样,运行startup.bat就可以运行服务器,运行shutdown.bat就可以关闭服务器了. 个人