js 的小效果---->选项卡
<!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 ...
随机推荐
- lua代码优化（转）
暂时转了别人一篇,以后再优化 1.使用局部变量local 这是最基础也是最有用的策略,虽然使用全局变量并不能完全避免,但还是应该尽量避免,取而代之使用局部变量即local.这里的局部变量也包括函数fu ...
- Java与.NET 的Web Services相互调用
一:简介 本文介绍了Java与.NET开发的Web Services相互调用的技术.本文包括两个部分,第一部分介绍了如何用.NET做客户端调用Java写的Web Services,第二部分介绍了如何用 ...
- Find The Multiple 分类： 搜索 POJ 2015-08-09 15:19 3人阅读 评论(0) 收藏
Find The Multiple Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 21851 Accepted: 8984 Sp ...
- Visual Studio + SqlServer
vs2010: http://pan.baidu.com/s/1eQrlUwU sqlServer2008: http://pan.baidu.com/s/1sjQbyk1
- ISO C90 forbids mixed declarations and code 警告
编译的时候经常会遇到 ISO C90 forbids mixed declarations and code 警告百度了一下,知道是如下原因 : 变量定义之前任何一条非变量定义的语句(注意:语句是 ...
- python访问mysql将返回的表转化为json
## Licensed to the Apache Software Foundation (ASF) under one or more# contributor license agreement ...
- JavaScript的循环语句
JavaScript的循环语句 1.JavaScript的循环语句 (1)for循环语句 - 循环代码块一定的次数: (2)for/in循环语句 - 循环遍历对象的属性: (3)while循环语句 - ...
- 四、java中的数组
总结: 数组的特点: 1.存储的数据类型单一. 2.数组的大小不可变. 3.Arrays工具类.
- 分别向Set集合以及List集合中添加"A"、"a"、"c"、"C"、"a"，观察重复值"a"能否添加成功
package lianxi; import java.util.*; public class JhSet { public static void main(String[] args) { Se ...
- linux终端下为什么用命令打开软件后,要关闭软件才能继续下一条命令？
用终端打开chromium浏览器(命令:chromium-browser)的时候发现打开浏览器之后无法继续在终端输入命令,只能关闭浏览器或者在终端按下Ctrl+c,此时系统将退出浏览器并可以继续在终端 ...