js实现简单选显卡功能

js实现简单选显卡功能

CSS样式

*{
  text-align: center;
 }
 nav li{
  display: inline;
  width: 24%;
  text-decoration: none;
  padding: 15px;
 }
 li:hover{
  background-color: lightblue;
 }
 section{
  height: 300px;
 }

Html代码

<!--导航栏部分HTML代码-->
<nav id="nav">
 <ul>
 <li class="act">选卡1</li>
 <li>选卡2</li>
 <li>选卡3</li>
 <li>选卡4</li>
 </ul>
</nav>
<!--内容部分HTML代码-->
<div id="container">
 <section class="tab" style="background-color: tomato">内容1</section>
 <section class="tab" style="background-color: cyan">内容2</section>
 <section class="tab" style="background-color: blueviolet">内容3</section>
 <section class="tab" style="background-color: gold">内容4</section>
</div>

Js代码

<script>
 window.onload=function () {
 //获取 li 也就是选项卡选项tab
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');
 //获取 包裹在container里面的section(内容)
 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 //使用 循环依次得到li 
 for(var i=0;i<oNav.length;i++){
  oNav[i].index=i;
 //每一次得到li后执行鼠标点击操作则触发函数function  
  oNav[i].onclick=function () { //此处除了可以使用onclick,还可以使用onmouseover
 //在li的个数内依次展示内容  
  for(var i=0;i<oNav.length;i++){
   oNav[i].className='';
   oDiv[i].style.display="none";
  }
  this.className='act';
  oDiv[this.index].style.display="block"
  }
  for(var m=1;m<oNav.length;m++){
   oNav[m].className='';
   oDiv[m].style.display="none";
  }
 }
};
</script>

版权声明:
作者:laocao_blog
链接:http://www.lcblog.vip/50.html
来源:PB网站模板_源码_教程
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>