js实现简单的选项卡效果
更新时间:2017年02月23日 15:33:42 作者:西门官人
本文主要介绍了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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
这篇文章主要介绍了Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09JavaScript实现京东购物放大镜和选项卡效果的方法分析
这篇文章主要介绍了JavaScript实现京东购物放大镜和选项卡效果的方法,结合实例形式分析了javascript基于事件响应、数值计算与页面元素动态修改实现图片放大功能以及tab选项卡切换效果相关操作技巧,需要的朋友可以参考下2018-07-07JavaScript中的toString()和toLocaleString()方法的区别
本文给大家介绍JavaScript中的toString()和toLocaleString()方法的区别,非常不错,具有参考借鉴价值,需要的朋友可以参考下2017-02-02
最新评论