js实现简单的选项卡效果


Posted in Javascript onFebruary 23, 2017

效果如下:

 js实现简单的选项卡效果

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:200px;height:100px;border:1px red solid;display:none};
</style>
<script>
window.onload=function(){
 var oDiv=document.getElementsByTagName("div")
 var oIput=document.getElementsByTagName("input")
 oDiv[0].style.display="block";
 var ten=oIput[0]
 for(i=0;i<oIput.length;i++){
 oIput[i].indent=i
 //通过自定义属性获得下标值
 oIput[i].onclick=function(){
  ten.style.background=''
  oDiv[ten.indent].style.display="none"
  //点击时把上一个隐藏
  this.style.background="yellow"
  oDiv[this.indent].style.display="block"
  ten=this
  }
 }
 }
</script>
</head>
<body>
<input type="button" value="按钮一" style="background:yellow"/>
<input type="button" value="按钮二"/>
<input type="button" value="按钮三"/>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
JScript中的条件注释详解
Apr 24 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 #Javascript
jQuery事件详解
Feb 23 #Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 #Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 #Javascript
Javascript 链式作用域详细介绍
Feb 23 #Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 #Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 #Javascript
You might like
基于文本的访客签到簿
2006/10/09 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
jquery获取radio值实例
2014/10/16 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Python实现注册、登录小程序功能
2018/09/21 Python
Series和DataFrame使用简单入门
2019/11/13 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
导游词之太原天龙山
2020/01/02 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android