主页 / 网络编程 /

js实现选项卡效果

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了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-: 2px solid grey;
 background-color: #c;
} 
.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>

如果大家还想深入学习，可以点击两个精彩的专题

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

上一篇：微信小程序实现下滑到底部自动翻页功能 下一篇：基于JS正则表达式实现模板数据动态渲染(实现思

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by