主要用的索引值

首先 写三个按钮

<input type="button" >
<input type="button" >
<input type="button" >

设置input按钮的样式

input{ border:; padding:3px 5px; background:blue; color:#fff; margin-left:5px;}

下面写切换的内容的html代码和css样式

<div id="div1">
<div style="display:block">第一个切换</div>
<div>第二个切换</div>
<div>第三个切换</div>
</div>
#div1 div{width:300px; height:200px; border:3px solid #000;display:none; padding:10px;}
.active{ background-color:red;}

开始写js代码

1  windows.onload = function(){
var oDiv = document.getElementById('div1')
var aInput = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i=0; i< aInput.length ; i++){
aInput[i].index = i;
aInput[i].oncilck = function(){
for( var i=0; i<aInput.length; i++){
this.className = '';
aDiv[this.index].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
}
}
}

javascript的选项卡的更多相关文章

  1. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  2. 简要分析javascript的选项卡和轮播图

    选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...

  3. JavaScript写选项卡

    方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. JavaScript实现选项卡(三种方法)

    本文实例讲述了js选项卡的实现方法. 一.html代码: <div id="div1"> <input class="active" type ...

  5. javascript实现选项卡切换的4种方法

    方法一:for循环+if判断当前点击与自定义数组是否匹配 <html lang="en"> <head> <meta charset="UT ...

  6. JavaScript中选项卡的几种写法

    效果图: 1.基本写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. 原生javascript实现选项卡(基础版)

    一.实现原理 1.主要运用“排他思想”,在设置当前元素前,先把相应元素恢复到默认状态 2.给相应元素添加下标的应用 二.代码展示 <!DOCTYPE html> <html> ...

  8. 无JavaScript实现选项卡轮转切换效果

    CSS:   .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...

  9. 闲扯 Javascript 01 实现选项卡

    javascript 实现选项卡 今天下午的两节课,在机房闲来没事 ,就学习了javascript 怎么获取HTML的标签,改变CSS样式,资料来源 智能社! <script> windo ...

随机推荐

  1. android 常见分辨率(mdpi、hdpi 、xhdpi、xxhdpi )及屏幕适配注意事

    1.1 手机常见分辨率: 4:3VGA     640*480 (Video Graphics Array)QVGA  320*240 (Quarter VGA)HVGA  480*320 (Half ...

  2. bzoj1303

    首先找到b的位置x,要求满足b为中位数的数列把比b大的设为1,比b小设为-1则数列满足条件则x 左边的的和+x右边的和=0 然后应该就很好搞了 ..] of longint; i,n,m,x,k,an ...

  3. bzoj3124

    很好的一道treedp,当然也挺烦的首先不难想到先求出一个直径,然后穷举每条边,看他删除之后直径大小是否会变,变了的话就是必须经过的边下面我们就要想怎么优化,本人语言表达略差,还是配合程序说吧. ty ...

  4. nginx -- handler模块(100%)

    handler模块简介 相信大家在看了前一章的模块概述以后,都对nginx的模块有了一个基本的认识.基本上作为第三方开发者最可能开发的就是三种类型的模块,即handler,filter和load-ba ...

  5. gcc编译器参数使用及解决

    gcc -c CStringAndPointer.c -o CStringAndPointer.o 执行时出现问题: ./CStringAndPointer.o bash: ./CStringAndP ...

  6. Java中的包

    包:定义包用package关键字. 1:对类文件进行分类管理. 2:给类文件提供多层名称空间. 如果生成的包不在当前目录下,需要最好执行classpath,将包所在父目录定义到classpath变量中 ...

  7. Eclipse添加快速查找Dao中方法所对应的Mybatis XML映射SQL的插件

    Dao关联Mybatis快速查找的插件安装地址:http://dl.bintray.com/harawata/eclipse 安装步骤: ①Eclipse ==> Help ==> Ins ...

  8. HDOJ/HDU 2550 百步穿杨(注意排序)

    Problem Description 时维九月,序属三秋,辽军大举进攻MCA山,战场上两军正交锋.辽军统帅是名噪一时的耶律-James,而MCA方则是派出了传统武将中草药123.双方经过协商,约定在 ...

  9. lightoj 1037 状态压缩

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1037 #include<cstdio> #include<cstri ...

  10. hdu4281 区间dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4283 #include<iostream> #include<algorithm&g ...