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 相关文章推荐
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
Paypal支付不完全指北
Jun 04 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
用几道面试题来看JavaScript执行机制
Apr 30 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
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
七年级历史教学反思
2014/02/05 职场文书
《争吵》教学反思
2014/02/15 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
党员创先争优活动总结
2014/05/04 职场文书
应届生求职信范文
2014/06/30 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
yolov5返回坐标的方法实例
2022/03/17 Python
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技