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

js实现选项卡效果

 更新时间：2020年03月07日 11:09:21   作者：林西相心  
这篇文章主要为大家详细介绍了js实现选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现选项卡效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<script type="text/javascript">
 window.onload=function(){
 var ob = document.getElementById('div1');
 var ob1 = div1.getElementsByTagName('input');
 var ob2= div1.getElementsByTagName('div');
 
 for(var i = 0;i< ob1.length;i++){
  ob1[i].index=i;
  ob1[i].onmouseover=function(){
  
  for(var i = 0;i< ob1.length;i++){
  ob2[i].style.display='none';
   ob1[i].className='';
      } 
 this.className='active';
  ob2[this.index].style.display='block';

 
 } 
  ob1[i].onmouseout=function(){
  for(var i=0 ; i< ob1.length;i++){
  ob2[i]['style']['display']='none';
  }
  }

 } 

 }; 
 
</script>
<body>
<style type="text/css">
#div1 div{
 width: 100px;
 height: 100px;
 border-top: 2px solid grey;
 background-color: #ccc;
} 
.active {
 background-color: yellow;
}

</style>
<div id="div1">
 
<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">

<div style="display:block;" >1111</div>
<div style="display: none;">2222</div>
<div style="display: none;">3333</div>
<div style="display: none;">4444</div>

</div>

</body>
</html>

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js 获取范围内的随机数实例代码

    js 获取范围内的随机数实例代码

    下面小编就为大家带来一篇js 获取范围内的随机数实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • WebApi+Bootstrap+KnockoutJs打造单页面程序

    WebApi+Bootstrap+KnockoutJs打造单页面程序

    这篇文章主要介绍了WebApi+Bootstrap+KnockoutJs打造单页面程序的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 子窗口、父窗口和Silverlight之间的相互调用

    子窗口、父窗口和Silverlight之间的相互调用

    前两天做 silverlight 的东西，主页面打开一个子页面，然后子页面中包含一个 silverlight 应用程序那难免会涉及到他们三者相互调用的问题
    2010-08-08
  • JS中的异常处理方法分享

    JS中的异常处理方法分享

    我们在编写js过程中，难免会遇到一些代码错误问题，需要找出来，有些时候怕因为js问题导致用户体验差，这里给出一些解决方法
    2013-12-12
  • 利用jsonp与代理服务器方案解决跨域问题

    利用jsonp与代理服务器方案解决跨域问题

    这篇文章主要给大家介绍了关于利用jsonp与代理服务器方案解决跨域问题的相关资料，文中通过示例代码给大家介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • js下利用userData实现客户端保存表单数据

    js下利用userData实现客户端保存表单数据

    对于多数网页制作的朋友，实现在客户端保存在网页表单上的信息，比较多的是采用Cookie技术来实现，这些功能例如：下拉列表框选择的选项，文本框输入的数据等。
    2010-06-06
  • 详解关闭令人抓狂的ESlint 语法检测配置方法

    详解关闭令人抓狂的ESlint 语法检测配置方法

    这篇文章主要介绍了详解关闭令人抓狂的ESlint 语法检测配置方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • JavaScript 语言基础知识点总结（思维导图）

    JavaScript 语言基础知识点总结（思维导图）

    这篇文章通过思维导图格式总结了JavaScript 语言基础知识点，想要学习js的朋友可以参考下
    2013-11-11
  • JS实现百度网盘任意文件强制下载功能

    JS实现百度网盘任意文件强制下载功能

    这篇文章主要介绍了JS实现百度网盘任意文件强制下载 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • jQuery与JavaScript节点创建方法的对比

    jQuery与JavaScript节点创建方法的对比

    本文主要介绍jQuery与JavaScript节点的创建方法，以及他们的具体代码实现方法，大家可以对比下他们之间的不同，希望对大家编写代码有所帮助
    2016-11-11

最新评论