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 的小效果---->选项卡的更多相关文章

  1. js的小效果-图片放大镜效果

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  3. CSS3实现几个常用的网页小效果

    主题 由于最近比较忙,自己也没有很充裕的时间可以去做比较丰富的分享.今晚我挤出时间来制作这几个很常用的CSS3网页小效果.最近写JS的时间比例比较多,不过我还是比较钟情于CSS3.所以我还是坚持分享一 ...

  4. js-------》(小效果)实现倒计时及时间对象

    js实现倒计时及时间对象 JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset ...

  5. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  6. JS-鼠标彩色拖尾小效果

    实现步骤解析: * 这原本就是一个鼠标后面跟随一串小方块的效果,     * 后来我就想,运用之前学的随机数的案例把小方块的颜色做成彩色的,     * 并且每一个小方块的色彩是随机分配而不是我自己手 ...

  7. Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

    Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...

  8. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  9. JS处理事件小技巧

    今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...

随机推荐

  1. 使用butterknife zelezny插件时必须保证已导入butterKnife的库工程。

    使用butterknife zelezny插件时必须保证已导入butterKnife的库工程. 另外需要把光标定位到setContentView(R.layout.activity_main);中的a ...

  2. Poj(2135)，MCMF，模板

    题目链接:http://poj.org/problem?id=2135 Farm Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submis ...

  3. MySQL 数据库发展历程及缺点

    传统关系数据库的瓶颈 传统的关系数据库具有不错的性能,高稳定型,久经历史考验,而且使用简单,功能强大,同时也积累了大量的成功案例.在互联网领域,MySQL成为了绝对靠前的王者,毫不夸张的说,MySQL ...

  4. 微软DbHelper

    using System; using System.Configuration; using System.Data; using System.Data.Common; using System. ...

  5. dot函数

    dot函数是两个向量的点乘,注意lua中dot函数的写法 th> a [torch.DoubleTensor of size 1x3] [.0002s] th> b [torch.Doub ...

  6. ContentProvider官方教程(10)<provider>元素及属性介绍

    The <provider> Element Like Activity and Service components, a subclass of ContentProvider mus ...

  7. SqlSever基础 datalength函数 计算前后都有空格的字符串的长度

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  8. 利用JDBC处理mysql大数据--大文本和二进制文件等

    转载自http://www.cnblogs.com/xdp-gacl/p/3982581.html 一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob, ...

  9. JAVA语言基础——字符串

    1.字符串的比较代码 String.equals System.out.println("str1和str2是否相同:"+(str1.equals(str2))); equals在 ...

  10. CCNA training notes

    5/29: vlan:virtual lan, 通过PVID来将物理上连通的host/PC划分到不同的局域网. switch的每个port有access与trunk两种mode,trunk模式的por ...