欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-25 22:29:46
选项卡这个效果估计以后的项目会经常涉及到,对代码还是半熟练的情况下还是写下来吧。 先来布局一个简单的页面: &l...

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

<!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选项卡效果详解整合,希望对大家有所帮助