脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 选项卡

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • ES6中module模块化开发实例浅析

    ES6中module模块化开发实例浅析

    这篇文章主要介绍了ES6中module模块化开发,结合实例形式分析了ES6中模块化开发的相关功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • js获取USB扫码枪数据的方法

    js获取USB扫码枪数据的方法

    这篇文章主要为大家详细介绍了js获取USB扫码枪数据的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JS事件监听与事件委托举例详解(前端小白必学)

    JS事件监听与事件委托举例详解(前端小白必学)

    在JavaScript的学习中我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等,下面这篇文章主要给大家介绍了关于JS事件监听与事件委托的相关资料,需要的朋友可以参考下
    2024-07-07
  • JS的执行机制(EventLoop、宏任务和微任务)

    JS的执行机制(EventLoop、宏任务和微任务)

    这篇文章主要介绍了JS的执行机制(EventLoop、宏任务和微任务)，具有很好的参考价值，希望对大家有所帮助。
    2023-01-01
  • 基于three.js编写的一个项目类示例代码

    基于three.js编写的一个项目类示例代码

    这篇文章主要给大家介绍了关于基于three.js编写的一个项目类的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • 微信小程序自定义可滑动日历界面

    微信小程序自定义可滑动日历界面

    这篇文章主要为大家详细介绍了微信小程序自定义可滑动日历界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JavaScript添加随滚动条滚动窗体的方法

    JavaScript添加随滚动条滚动窗体的方法

    这篇文章主要介绍了JavaScript添加随滚动条滚动窗体的方法,涉及JavaScript事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-02-02
  • JavaScript中的ArrayBuffer详细介绍

    JavaScript中的ArrayBuffer详细介绍

    这篇文章主要介绍了JavaScript中的ArrayBuffer详细介绍,本文讲解了Array 在内存中的堆栈模型、原始缓冲区的创建、数据化数组、DataView对象、XHR2 中的 ArrayBuffer等内容,需要的朋友可以参考下
    2014-12-12
  • 前端实现界面元素拖拽功能的3种方式总结(亲测有效)

    前端实现界面元素拖拽功能的3种方式总结(亲测有效)

    这篇文章主要介绍了前端实现界面元素拖拽功能的3种方式,三种方法分别是纯HTML+CSS+JS、Vue模板和Vue全局指令,每种方法都通过监听鼠标事件来实现元素的拖动功能,并通过控制阀来确保只有在指定区域按下鼠标时才开始拖动,需要的朋友可以参考下
    2025-02-02
  • JavaScript实现好看的跟随彩色气泡效果

    JavaScript实现好看的跟随彩色气泡效果

    这篇文章主要为大家详细介绍了JavaScript实现好看的跟随彩色气泡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论