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 ...
随机推荐
- 数据结构之数组Array
数组Array 基本操作 Status InitArray(int dimm,...)//若维数dim和随后的各维长度合法,则构造相应的数组A,并返回OK Status DestroyArray() ...
- selenium资料
来源 http://release.seleniumhq.org/selenium-remote-control/0.9.2/doc/dotnet/Selenium.ISelenium.MouseMo ...
- php 错误信息配置
display_errors = on/off错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利.推荐关闭此选项. ...
- linux性能优化
一.最小化安装系统二.关闭NetworkManager服务. NetworkManger服务如果启动,当你手动配置网卡时会发生冲突 [root@linuxangel ~]# /etc/init.d/N ...
- Childlife旗下三驾马车
Childlife旗下,尤其以 “提高免疫力”为口号的“三驾马车”:第一防御液.VC.紫雏菊,是相当热门的海淘产品.据说这是一系列“成分天然.有效治愈感冒提升免疫力.由美国著名儿科医生研发”的药物.
- iOS高级工程师面试
1. 你使用过Objective-C的运行时编程(Runtime Programming)么?如果使用过,你用它做了什么?你还能记得你所使用的相关的头文件或者某些方法的名称吗? Objecitve- ...
- select、poll、epoll三组IO复用
int select(int nfds,fd_set* readfds,fd_set* writefds,fd_set* exceptfds,struct timeval* timeout)//其中n ...
- TOMCAT启动完成但是ECLIPSE仍然显示starting....
最近重新部署了一个TOMCAT服务,但是启动碰到个问题,虽然TOMCAT控制台已显示启动成功,但是ECLIPSE右下角仍然一直显示STARTING,最后TOMCAT超时,启动失败. 之前以为是拷贝工程 ...
- kafka offset-check工具失效的问题
转载请注明原创地址http://www.cnblogs.com/dongxiao-yang/p/5414077.html 由于平时业务预警等需求,针对现在公司的kafka系统部署了几套监控系统,包括调 ...
- flipsnap--手机屏幕水平滑动框架
在很多手机应用中,大家都会见过这样一种效果:当手指横向滑动屏幕时,屏幕上的页面会向左或向右滑动. 下面介绍一下当用HTML5+CSS3开发手机应用时解决这类效果的一款js框架:flipsnap. fl ...