<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#box1 { width: 300px;
height: 300px;
margin: 100px auto;
border: #000 2px solid;
font-family: "微软雅黑";
}
#box1 a{
display: block;
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background: green;
color: #fff;
text-decoration:none;
}
#box1 div {
width: 300px;
height: 260px;
line-height:260px;
text-align: center;
font-size:40px;
display: none;
}
#box1 a.active {
background: blue;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box1');
var aBtn = oBox.getElementsByTagName('a');
var aDiv = 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 = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
} } }
</script>
</head>
<body>
<div id="box1">
<a href="javascript:;" class="active">按钮1</a>
<a href="javascript:;" >按钮2</a>
<a href="javascript:;" >按钮3</a>
<div style="display:block;">div1</div>
<div>div2</div>
<div>div3</div>
</div>
</body>
</html>
选项卡: 1.按钮和内容的个数是对应[相等]的;
2.当前选中的按钮有选中状态;其他按钮没有状态
3.和当前选中的按钮对应的元素显示，其他的元素隐藏;
选项卡步骤; 1.先做按钮:
1>.先清空所有按钮的className;
for(var i = 0; i < aBtn.length; i++){
aBtn[i].className = '';
}
2>.当前点击的按钮加选中的状态[className];
this.className = 'active';
2.把按钮和div关联起来;
1>.隐藏所有的元素
for(var i = 0; i < aDiv.length; i++){
aDiv[i].style.display = 'none';
}
2>.和当前按钮对应的div显示;
aDiv[this.index].style.display = 'block';
------->此文转发
js 的小效果---->选项卡的更多相关文章
-
js的小效果-图片放大镜效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
-
纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
-
CSS3实现几个常用的网页小效果
主题 由于最近比较忙,自己也没有很充裕的时间可以去做比较丰富的分享.今晚我挤出时间来制作这几个很常用的CSS3网页小效果.最近写JS的时间比例比较多,不过我还是比较钟情于CSS3.所以我还是坚持分享一 ...
-
js-------》(小效果)实现倒计时及时间对象
js实现倒计时及时间对象 JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset ...
-
hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/ 查找和下载. hamme ...
-
JS-鼠标彩色拖尾小效果
实现步骤解析: * 这原本就是一个鼠标后面跟随一串小方块的效果, * 后来我就想,运用之前学的随机数的案例把小方块的颜色做成彩色的, * 并且每一个小方块的色彩是随机分配而不是我自己手 ...
-
Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果
Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...
-
React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
-
JS处理事件小技巧
今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...
随机推荐
-
ABP框架 - 设置管理
文档目录 本节内容: 简介 关于ISettingStore 定义设置 setting scope(设置范围) 重写设置定义 获取设置值 服务端 客户端 修改设置 关于缓存 简介 每个应用必需存储一些设 ...
-
Java Swing 第03记 布局管理器
几种Swing常用的布局管理器 BorderLaout 它将容器分为5个部分,即东.南.西.北.中,每一个区域可以容纳一个组件,使用的时候也是通过BorderLayout中5个方位常量来确定组件所在的 ...
-
自动化运维工具之 Ansible 介绍及安装使用
一.初识Ansible 介绍: Absible 使用 模块(Modules)来定义配置任务.模块可以用标准脚本语言(Python,Bash,Ruby,等等)编写,这是一个很好的做法,使每个模块幂等.A ...
-
【英语】Bingo口语笔记(23) - 万圣节系列
jack-o-* 杰克灯(南瓜灯) spooky 幽灵般的
-
navicat导入mysql数据库sql时报错或数据不完全问题
错误详情:[Err] [Imp] 2006 - MySQL server has gone away 或无提示错误,但是导入数据明显缺少字段和数据 找到服务器上的MYSQL安装目录下的my.ini文件 ...
-
android_orm框架之greenDAO(二)
一.概述 在上次greenDao第一篇文章中,我们对greenDao的使用步骤和基本用法给大家做了介绍,文章链接:http://www.cnblogs.com/jerehedu/p/4304766.h ...
-
scapy安装及SCTP包分析
关于Scapy scapy是一个强大的交互式数据包处理程序(使用python编写).它能够伪造或者解码大量的网络协议数据包,能够发送.捕捉.匹配请求和回复包等.它可以很容易地处理一些典型操作,比如端口 ...
-
学习笔记—log4j2
概念 什么是日志 日志是系统运行过程中的后台输出信息,方便程序员进行系统运行的管控以及Bug的查找. log4j2的概念 log4j2是一个日志输出的插件,专门用来进行日志的管理. Log4j是Apa ...
-
SQL Server 2016新特性：列存储索引新特性
SQL Server 2016新特性:列存储索引新特性 行存储表可以有一个可更新的列存储索引,之前非聚集的列存储索引是只读的. 非聚集的列存储索引支持筛选条件. 在内存优化表中可以有一个列存储索引,可 ...
-
PHP实现二叉树的深度优先遍历（前序、中序、后序）和广度优先遍历（层次）
前言: 深度优先遍历:对每一个可能的分支路径深入到不能再深入为止,而且每个结点只能访问一次.要特别注意的是,二叉树的深度优先遍历比较特殊,可以细分为先序遍历.中序遍历.后序遍历.具体说明如下: 前序遍 ...