好长时间没有写过原生的js了 给大家先来一个简单选项卡功能吧 第一回写博客 请大家见谅哈

中天 • • web开发技术 • 254 阅读

<--css部分-->

*{
  margin: 0;
  padding: 0;
  list-style: none;
  }
  #box{
  width: 500px;
  height: 560px;
  border: 1px solid red;
  margin: 100px auto ;
  }
  .top>ul{
  display: flex;
  }
  li{
  width: 100px;
  height: 60px;
  background-color: wheat;
  text-align: center;
  line-height: 60px;
  }
  .atif{
  background-color: teal;
  color: #fff;
  }
  .bottom>div{
  width: 500px;
  height: 500px;
  background-color: yellow;
  text-align: center;
  line-height: 500px;
  font-size: 20px;
  color: red;
  display: none;
  }
  .bottom >.atife{
  display: block;
  color: blue;
  }

//html部分

<div id="box">

  <div class="top">
  <ul>
  <li class="atif">首页</li>
  <li>详情页</li>
  <li>页面一</li>
  <li>页面二</li>
  <li>页面三</li>
  </ul>
  </div>
  <div class="bottom">
  <div class="atife">首页</div>
  <div>详情页</div>
  <div>页面一</div>
  <div>页面二</div>
  <div>页面三</div>
  </div>
  </div>

//js

var oLi=document.getElementsByTagName(‘li‘);
  var oBottom=document.getElementsByClassName(‘bottom‘)[0];
  var oBottom_div=oBottom.getElementsByTagName(‘div‘);
  for(var i=0;i<oLi.length;i++){
  oLi[i].index=i;
  oLi[i].onclick=function(){
  for(var j=0;j<oBottom_div.length;j++){
  oBottom_div[j].className=‘‘;
  oLi[j].className=‘‘;
  }
  this.className=‘atif‘;
  oBottom_div[this.index].className=‘atife‘;
  }
  }

好长时间没有写过原生的js了 给大家先来一个简单选项卡功能吧 第一回写博客 请大家见谅哈

原文：https://www.cnblogs.com/ccuihaidong/p/15260913.html

以上是好长时间没有写过原生的js了 给大家先来一个简单选项卡功能吧 第一回写博客 请大家见谅哈的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>