分享和记录下选项卡切换的心得

最新推荐文章于 2024-11-17 09:07:02 发布

双椒打卤面

最新推荐文章于 2024-11-17 09:07:02 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

分类专栏：新手入门文章标签： js特效

本文链接：https://blog.youkuaiyun.com/HIDPROVIDER/article/details/74075360

新手入门专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的选项卡切换效果的实现方式，通过HTML、CSS和JavaScript完成布局、样式及交互逻辑。文章详细展示了如何使用JavaScript监听选项卡的点击事件，并在点击时更新样式和显示对应的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>选项卡切换</title>
  <style type="text/css">
    body,ul,li,div{
      padding: 0;
      margin:0;
    }
    ul{
      list-style: none;
    }
    #big{
      width: 400px;
      margin: 50px auto;
    }
    #big #tab_title{
      height: 31px;
      border-bottom: 2px solid #8B4513;
    }

    /*在写样式的过程中我遇到一个问题，就是如何在点击选项卡的时候刚好隐藏这个选项卡下面的边框线呢？给ul一个高度和下边框，当点击选项卡的时候，li的高度加上它所有的边框=ul的高度加上它所有的边框。当然，同时要给li的下边框设置粗一些的白色边框来盖住。*/
    #big #tab_title li{
      width: 70px;
      height: 28px;
      line-height: 28px;
      border:1px solid #aaa;
      border-bottom: none;
      float: left;
      text-align: center;
      margin-left: 5px;
      cursor: pointer;
    }
    #big div{
      clear: both;
      border:1px solid #aaa;
      border-top: none;
      font-size: 10px;
      padding: 20px;
    }
    .hide{
      display: none;
    }
    #big #tab_title .active{
      border-top: 2px solid #8B4513;
      border-bottom: 3px solid #fff;
    }
  </style>
  <script type="text/javascript">
    window.onload=function(){

      // 定义的变量最关键的是获取到li标签数组和div内容数组
      var big =document.getElementById("big");
      var tab_title_li=big.getElementsByTagName("li");
      var tab_content=big.getElementsByTagName("div");

      // 建立一个遍历li数组的循环
      for(var i=0;i<tab_title_li.length;i++){

        // 将它的数组的索引值储存起来，以便待会与内容数组一一对应

        tab_title_li[i].index=i;

        // 建立一个点击事件
        tab_title_li[i].onclick=function(){
          for(var i=0;i<tab_title_li.length;i++){

            // 点击任意一个li的时候首先清空所有的li的class,给所有内容加一个hide的类(隐藏所有的内容)
            tab_title_li[i].className = "";
            tab_content[i].className="hide";
          }
            // 给所点击的li添加上一个active的类，给所点击的li相同索引的内容块清空其类(即恢复显示)
            tab_title_li[this.index].className="active";
            tab_content[this.index].className="";
        }
      }
    }
      // 最后的最后，说一下总体的思路吧，因为我比较蠢，不喜勿喷，首先我们要做一个选项卡切换的效果，这么一套做下来我的思路是先获取到所有选项卡的数组和所有内容块的数组，找出两者的联系(每一个选项卡都与其内容的索引一一对应)。
      // 然后建立一个for循环，先把选项卡的数组存在index里，建立一个点击选项卡的事件，事件里面首先清空所有选项卡和内容的活跃状态，再给所点击的选项卡和内容添加活跃状态
  </script>
</head>
<body>
<div id="big">
  <ul id="tab_title">
    <li class="active">选项卡一</li>
    <li>选项卡二</li>
    <li>选项卡三</li>
  </ul>
  <div>
    275万购昌平邻铁三居 总价20万买一居<br>
    200万内购五环三居 140万安家东三环<br>
    北京首现零首付楼盘 53万购东5环50平<br>
    京楼盘直降5000 中信府 公园楼王现房<br>
  </div>
  <div class="hide">
    40平出租屋大改造 美少女的混搭小窝<br>
    经典清新简欧爱家 90平老房焕发新生<br>
    新中式的酷色温情 66平撞色活泼家居<br>
    瓷砖就像选好老婆 卫生间烟道的设计<br>
  </div>
  <div class="hide">
    通州豪华3居260万 二环稀缺2居250w甩<br>
    西3环通透2居290万 130万2居限量抢购<br>
    黄城根小学学区仅260万 121平70万抛!<br>
    独家别墅280万 苏州桥2居优惠价248万<br>
  </div>
</div>
</body>
</html>