JS实现选项卡效果的代码实例

网络编程 2024/9/22 佚名

3 1 2

选项卡这个效果估计以后的项目会经常涉及到，对代码还是半熟练的情况下还是写下来吧。
先来布局一个简单的页面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{margin: 0;padding: 0;list-style: none;}
      #box{margin: 50px;}
      #box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin-right: 2px;float: left;}
      #box .active{background: red;}
      #content{clear: both;}
      #content div{width: 404px;height: 200px;border: 1px solid #d8d8d8;display: none;}
    </style>
  </head>
  <body>
    <div id="box">
      <!--这个ul为选项卡的菜单，提供选择项，并且设置其中一个li为默认样式-->
      <ul>
        <li class="active">新闻</li>
        <li>社会</li>
        <li>科技</li>
        <li>娱乐</li>
      </ul>
      <!--这个div为选项卡的内容，显示不同菜单的不同内容，并且设置其中一个div为可见，其他隐藏-->
      <div id="content">
        <div style="display: block;">新闻</div>
        <div>社会</div>
        <div>科技</div>
        <div>娱乐</div>
      </div>
    </div>
  </body>
</html>

选项卡的制作原理是：有若干的选项和对应数量的内容，当对其中一个选项进行操作时，显示对应内容，其他内容不显示。所以，在页面布局的时候，我们先给一个选项设置特殊样式和显示其对应的内容，其他选项样式不变，对应内容隐藏。当操作选项时，把选项的类名改为特殊样式的类名，并且显示对应内容。

<script type="text/javascript">
  window.onload=function(){
    var oBox=document.getElementById('box');
    var aLi=oBox.getElementsByTagName('li');
    var oCon=document.getElementById('content');
    var aDiv=oCon.getElementsByTagName('div');

    for(var i=0;i<aLi.length;i++){
      aLi[i].index=i;  //为每个li添加对应的索引index
      aLi[i].onclick=function(){  //循环为每个li添加onclick事件
      for(var i=0;i<aLi.length;i++){
        aLi[i].className=''; //循环清空li样式
        aDiv[i].style.display='none'; //循环隐藏所有div
      }
      this.className='active'; //当前点击的元素样式变成active
      aDiv[this.index].style.display='block';  //this.index 获取当前li对应的索引
      }
    }
  }
</script>

今天在做选项卡效果时遇到了一个非常低级的错误，但却迟迟找不到原因，如下：
这个是我布局的选项卡的菜单，看起来很简单，一个ul包着3个li，其中一个是 |，所以可以点击的菜单项只有两项，没毛病。

<ul id="text">
  <li class="active"><a href="javascript:" rel="external nofollow" rel="external nofollow" >必备软件</a></li>
  <li id="shu">|</li>
  <li><a href="javascript:" rel="external nofollow" rel="external nofollow" >常用软件</a></li>
</ul>

内容就不看了，接下来我就开始写JS的代码，getElementById什么的巴拉巴拉开始写，写完for循环觉得写完了，然后就运行。。。默认页正常，点击，，空白。？？？？？怎么回事？F12，aLink[i] is undefind；加了一个console.log，检测获取的aLi,aLink，有值，能获取，没错。然后下面循环检测aLink[i]，未定义，这是什么情况？在JS代码搞了将近一个小时，换获取方法，换变量名….各种方法，没效果。万万没想到的是，重新检测aLi的时候，发现长度为3。。顿时懵逼，aLink的长度为2，所以肯定有一个找不到。赶紧把第二个li改成span，成功。万恶的 ||||||||。只能说自己的知识还不够，还要继续努力！！！

var oBox=document.getElementById('box');
var oNav=document.getElementById('nav');
var aLi=oNav.getElementsByTagName('li');
var oCon=document.getElementById('con');
var aLink=oBox.getElementsByClassName('hide');

for(var i=0;i<aLi.length;i++){
  aLi[i].index=i; //为每个li添加对应的索引index
  aLi[i].onclick=function(){ //循环为每个li添加onclick事件
    for(var i=0;i<aLi.length;i++){
      aLi[i].className=''; //循环清空li样式
      aLink[i].style.display='none'; //循环隐藏所有div
    }
    this.className='active'; //当前点击的元素样式变成active
    aLink[this.index].style.display='block'; //this.index 获取当前li对应的索引
  }
}

以上所述是小编给大家介绍的JS选项卡效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

JS选项卡效果,JS选项卡

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JS实现选项卡效果的代码实例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

JS实现选项卡效果的代码实例

vue-i18n结合Element-ui的配置方法

微信打开网址添加在浏览器中打开提示的办法

评论“JS实现选项卡效果的代码实例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接