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. 20145227 《Java程序设计》第4周学习总结

    20145227 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 6.1 何谓继承 1.继承共同行为 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中, ...

  2. C++TSL之map容器（悲伤的故事）

    说一个悲伤地故事! 这几天正在加紧时间学STL!昨天刚刚勉强把map弄懂一点点.(故事的前提) 今天,来到平台准备刷有关map的题,老师推荐了一道题目.说是有关map.然后..不会!! 后来,百度.. ...

  3. Out of Hay

    Out of Hay Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13094 Accepted: 5078 Descripti ...

  4. out 传值

    public void Out(out int a, out int b) {//out相当于return返回值 //可以返回多个值 //拿过来变量名的时候,里面默认为空值 a=1; b=2; } s ...

  5. 解析xml,几种方式

    市面上解析xml分两种方式,1.dom  2.sax ,xml解析常见的一共有三种开发包,1.jaxp  2.jdom  3.dom4j,这三种方式最常用的是dom4j,jaxp和jdom很少有人用, ...

  6. ios kaifa

    弹窗提示 { ////ios 7 弹窗 // UIAlertView *alert1=[[UIAlertView alloc] // initWithTitle:@"tishi" ...

  7. QT笔记之自定义窗口拖拽移动

    1.QT自定义标题栏,拖拽标题栏移动窗口(只能拖拽标题,其他位置无法拖拽) 方法一: 转载:http://blog.sina.com.cn/s/blog_4ba5b45e0102e83h.html . ...

  8. UICollectionView 使用

    /** 初始化UICollectionView */ UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFlowLayout alloc ...

  9. PowerDesigner导出Excel

    1.打开PowerDesigner,创建物理模型(Physical Data Model) 2.在PowerDesigner菜单栏中,依次点击“Tools ->Excute Commands-& ...

  10. BQ27510 电量计的校准 的 C语言实现

    点击打开链接 根据TI官方MSP430平台移植修改过来的,在Omap37xx(wince)平台测试,理论上和平台无关,伸手党,赶紧复制粘贴代码吧.如果这篇文章帮助了你,给了好评也无妨. [cpp] v ...