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. Asp.net mvc5 系列笔记

    程序版本 vs 2015  1.0.0-beta4  ,得到你的肯定是我最大的动力. Asp.net Vnext 调试源码 Asp.net Vnext 自定义日志 Asp.net Vnext 中间件实 ...

  2. fragment相关

    1.鸿洋大神前两年写的,从最基础的开始详解.对常用的方法都做了精炼的总结,分上下两篇 http://blog.csdn.net/lmj623565791/article/details/3797096 ...

  3. ACM题目————士兵杀敌（三）

    [RMQ算法]:用于当数组过于庞大的时候,查询区间的最大(最小)值. 时间复杂度:O(nlogn),主要时间发费在预处理上,查询只要O(1). 描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军 ...

  4. Integer Inquiry -TJU1112

    作为最简单的高精度加法,要注意的是如下几点, 第一,因为是数位达到上百位的大数,所以只能用字符串数组来存贮. 第二,为了方便之后的相加操作,应该把字符串数组逆序转化为一个整型数组. 第三,在控制进位的 ...

  5. c# 中crystal report输出PDF文件

    工程中引入以下crystal report的类库crystaldecisions.crystalreports.enginecrystaldecisions.reportsourcecrystalde ...

  6. Children of the Candy Corn 分类： POJ 2015-07-14 08:19 7人阅读 评论(0) 收藏

    Children of the Candy Corn Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10933   Acce ...

  7. 山东理工大学第七届ACM校赛-经济节约 分类： 比赛 2015-06-26 10:34 19人阅读 评论(0) 收藏

    经济节约 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 由于经济紧张,某国国王决定减少一部分多余的士兵,这些士兵在边界都有各自的 ...

  8. HDU(2485)，最小割最大流

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2485 Destroying the bus stations Time Limit: 40 ...

  9. Log4net使用指南

    请在这里下载示例代码 1           简介 1.1          Log4net的优点: 几乎所有的大型应用都会有自己的用于跟踪调试的API.因为一旦程序被部署以后,就不太可能再利用专门的 ...

  10. javascript耐人寻味

    在思考javascript解释过程的时候,看过别人几篇文章,自己做了几个测试 容易理解,在javascript,形如这样的代码可以正常执行: alert(hello()); function hell ...