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 相关文章推荐
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
vue实现模态框的通用写法推荐
Feb 26 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Python中使用中文的方法
2011/02/19 Python
Python中的闭包实例详解
2014/08/29 Python
python机器学习之随机森林(七)
2018/03/26 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
一看就懂得Python的math模块
2018/10/21 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
python脚本和网页有何区别
2020/07/02 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
新年寄语大全
2014/04/12 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
总结Pyinstaller打包的高级用法
2021/06/28 Python