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 ...
随机推荐
- python: indentationerror: unexpected indent
以后遇到了IndentationError: unexpected indent你就要知道python编译器是在告诉你“Hi,老兄,你的文件里格式不对了,可能是tab和空格没对齐的问题,你需要检查下t ...
- c# 之五行地支
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- c#之线程
//Process[] pro= Process.GetProcesses(); //foreach (var item in pro) //{ // Console.WriteLine(item); ...
- 安装nginx python uwsgi环境 以及模拟测试
uwsgi帮助文档: http://uwsgi-docs-cn.readthedocs.io/zh_CN/latest/WSGIquickstart.html http://uwsgi-docs.re ...
- C#中进行单元测试
首先创建一个项目,写一段待测的程序: namespace ForTest { public class Program { static void Main(string[] args) { } pu ...
- 如何借助浏览器Console使用Js进行定位和操作元素
在进行Selenium自动化过程中,我们很难避免一些webdriver 很难定位到的一些元素(如:默认隐藏属性元素),那对于一些比较难定位到的元素,有什么好的解决办法? 其实我们都知道,Sel ...
- Less/Sass编译工具
less中午网站有详细的说明:http://www.1024i.com/demo/less/ 那里我使用的koala 全平台支持,国产.下载地址:http://koala-app.com/inde ...
- 【Java】Map杂谈，hashcode()、equals()、HashMap、TreeMap、LinkedHashMap、ConcurrentHashMap
参考的优秀文章: <Java编程思想>第四版 <Effective Java>第二版 Map接口是映射表的结构,维护键对象与值对象的对应关系,称键值对. > hashco ...
- 字符串转Json对象
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web.S ...
- BZOJ 1565 植物大战僵尸（最大权闭合图）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1565 题意:植物大战僵尸,一个n*m的格子,每 个格子里有一个植物,每个植物有两个属性: ...