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 ...
随机推荐
- 用R分析时间序列(time series)数据
时间序列(time series)是一系列有序的数据.通常是等时间间隔的采样数据.如果不是等间隔,则一般会标注每个数据点的时间刻度. time series data mining 主要包括decom ...
- 如果在遨游浏览器里设置Bing（必应）搜索为默认搜索
今天刚装了遨游浏览器,发现搜索引擎列表里没有Bing(必应)搜索的选项,就自己DIY了下. 步骤: 1. 在遨游搜索引擎列表管理里,添加一个新的搜索引擎项: Name:填写上”Bing(必应)“ (这 ...
- I love sneakers!(分组背包HDU3033)
I love sneakers! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 实现LUT
//实现LUT 查找表 #include "stdafx.h" #include <iostream> #include <opencv2/opencv.hpp& ...
- 验证码识别--type2
验证码识别--type2 终于来到了彩色图像,一定有一些特点 这里的干扰项是色彩不是很鲜艳的.灰色的线条,还有单独的干扰点,根据这些特性进行去除 直接ostu的话,有的效果好,有的效果不好 本来是 ...
- Codeforces Round #370 (Div. 2) A
Description There are n integers b1, b2, ..., bn written in a row. For all i from 1 to n, values ai ...
- VS2010常用快捷键
ctrl + K, ctrl + F 自动调整格式(选中内容) F12 转到定义 ctrl + F12 转到声明 ctrl + tab 文档窗口转换(下一个文档窗口) alt + F6 下一个面板窗口 ...
- SSH配置私钥登陆服务器
前言 本文基于实际Linux管理工作,实例讲解工作中使用ssh证书登录的实际流程,讲解ssh证书登录的配置原理,基于配置原理,解决实际工作中,windows下使用SecureCRT证书登录的各种问题, ...
- iOS深入学习：（UITableView系列3：insertRow）
前面一篇博客,我使用了reloadData来刷新界面,但是这样没有动画效果,那么我这里通过insertRowsAtIndexPaths:withRowAnimation设置动画效果,希望对大家有所帮助 ...
- Java float保留两位小数或多位小数
Java float保留两位小数或多位小数 方法1:用Math.round计算,这里返回的数字格式的. float price=89.89;int itemNum=3;float totalPr ...