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. Redis群集实现Asp.net Mvc分布式Session

    Session的缺点 众所周知Asp.net Session默认存储在IIS中,IIS的重启会导致Session丢失. 如果你的网站使用了session,当网站并发过大时可能引起溢出. 配置Redis ...

  2. ZOJ 3868 - Earthstone: Easy Version

    3868 - Earthstone: Easy Version Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld ...

  3. c# ReaderWriterLock类

    先前也知道,Monitor实现的是在读写两种情况的临界区中只可以让一个线程访问,那么如果业务中存在”读取密集型“操作,就 好比数据库一样,读取的操作永远比写入的操作多.针对这种情况,我们使用Monit ...

  4. spring注入参数详解

    spring注入参数详解 在Spring配置文件中, 用户不但可以将String, int等字面值注入到Bean中, 还可以将集合, Map等类型的数据注入到Bean中, 此外还可以注入配置文件中定义 ...

  5. php获取 本月 本周 或者 下月 下周的 开始时间 结束时间

    <?php $now_time = time(); $date=date("Y-m-d",$now_time); function get_date($date,$t='d' ...

  6. ContentProvider官方教程(6)provider支持的数据类型

    Provider Data Types Content providers can offer many different data types. The User Dictionary Provi ...

  7. git版本控制器

    Git 是一个开源的分布式版本控制系统 Google用于android 源代码的管理就是Git,  它支持离线工作, 本地提交可以稍后提交到服务器上. 众多的开源项目都使用 Git  作为版本控制系统 ...

  8. SqlSever基础 union 与 union all的区别，即 重复项是否全部显示

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

  9. 在JSP页面中输出字符" * "组成的金字塔

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  10. 建立exception包,编写TestException.java程序，主方法中有以下代码，确定其中可能出现的异常，进行捕获处理。

    package exception; public class TestException { public static void main(String[] args) { for(int i=0 ...