javascript的选项卡
主要用的索引值
首先 写三个按钮
<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的选项卡的更多相关文章
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
- 简要分析javascript的选项卡和轮播图
选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...
- JavaScript写选项卡
方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- JavaScript实现选项卡(三种方法)
本文实例讲述了js选项卡的实现方法. 一.html代码: <div id="div1"> <input class="active" type ...
- javascript实现选项卡切换的4种方法
方法一:for循环+if判断当前点击与自定义数组是否匹配 <html lang="en"> <head> <meta charset="UT ...
- JavaScript中选项卡的几种写法
效果图: 1.基本写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 原生javascript实现选项卡(基础版)
一.实现原理 1.主要运用“排他思想”,在设置当前元素前,先把相应元素恢复到默认状态 2.给相应元素添加下标的应用 二.代码展示 <!DOCTYPE html> <html> ...
- 无JavaScript实现选项卡轮转切换效果
CSS: .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...
- 闲扯 Javascript 01 实现选项卡
javascript 实现选项卡 今天下午的两节课,在机房闲来没事 ,就学习了javascript 怎么获取HTML的标签,改变CSS样式,资料来源 智能社! <script> windo ...
随机推荐
- android 常见分辨率(mdpi、hdpi 、xhdpi、xxhdpi )及屏幕适配注意事
1.1 手机常见分辨率: 4:3VGA 640*480 (Video Graphics Array)QVGA 320*240 (Quarter VGA)HVGA 480*320 (Half ...
- bzoj1303
首先找到b的位置x,要求满足b为中位数的数列把比b大的设为1,比b小设为-1则数列满足条件则x 左边的的和+x右边的和=0 然后应该就很好搞了 ..] of longint; i,n,m,x,k,an ...
- bzoj3124
很好的一道treedp,当然也挺烦的首先不难想到先求出一个直径,然后穷举每条边,看他删除之后直径大小是否会变,变了的话就是必须经过的边下面我们就要想怎么优化,本人语言表达略差,还是配合程序说吧. ty ...
- nginx -- handler模块(100%)
handler模块简介 相信大家在看了前一章的模块概述以后,都对nginx的模块有了一个基本的认识.基本上作为第三方开发者最可能开发的就是三种类型的模块,即handler,filter和load-ba ...
- gcc编译器参数使用及解决
gcc -c CStringAndPointer.c -o CStringAndPointer.o 执行时出现问题: ./CStringAndPointer.o bash: ./CStringAndP ...
- Java中的包
包:定义包用package关键字. 1:对类文件进行分类管理. 2:给类文件提供多层名称空间. 如果生成的包不在当前目录下,需要最好执行classpath,将包所在父目录定义到classpath变量中 ...
- Eclipse添加快速查找Dao中方法所对应的Mybatis XML映射SQL的插件
Dao关联Mybatis快速查找的插件安装地址:http://dl.bintray.com/harawata/eclipse 安装步骤: ①Eclipse ==> Help ==> Ins ...
- HDOJ/HDU 2550 百步穿杨(注意排序)
Problem Description 时维九月,序属三秋,辽军大举进攻MCA山,战场上两军正交锋.辽军统帅是名噪一时的耶律-James,而MCA方则是派出了传统武将中草药123.双方经过协商,约定在 ...
- lightoj 1037 状态压缩
题目链接:http://lightoj.com/volume_showproblem.php?problem=1037 #include<cstdio> #include<cstri ...
- hdu4281 区间dp
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4283 #include<iostream> #include<algorithm&g ...