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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
js实现消息滚动效果
Jan 18 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 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
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python列表解析配合if else的方法
2018/06/23 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
python能做哪些生活有趣的事情
2020/09/09 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
物业管理应届生求职信
2013/10/28 职场文书
电子商务专业个人的自我评价分享
2013/10/29 职场文书
18岁生日感言
2014/01/12 职场文书
请假条标准格式规范
2014/04/10 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
技校毕业生自荐信
2014/06/03 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers