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实现购物车程序
Nov 23 Javascript
js判断浏览器的比较全的代码
Feb 13 Javascript
input按钮的事件处理大全
Dec 10 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 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/11/22 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
Python实现决策树C4.5算法的示例
2018/05/30 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python3实现点餐系统
2019/01/24 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Python configparser模块操作代码实例
2020/06/08 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
学生会干部自荐信
2014/02/04 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
数控专业自荐书范文
2014/03/16 职场文书
见习报告格式范文
2014/11/08 职场文书
交通安全温馨提示语
2015/07/14 职场文书
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers