Jquery一个链式调用实现经典选项卡_jquery链式调用做选项卡-CSDN博客

本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/107733253

图片

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .box {
        width: 500px;
        margin: 100px auto;
      }

      ul {
        list-style: none;
        display: flex;
        position: relative;
        top: 1px;
      }

      li {
        width: 150px;
        margin-right: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 30px;
        text-align: center;
        border: 1px solid orangered;
      }

      .box div {
        width: 500px;
        border: 1px solid orangered;
        height: 300px;
        line-height: 300px;
        text-align: center;
        font-size: 50px;
        display: none;
      }

      ul li.active {
        border-bottom: 1px solid white;
      }

      .box div.active {
        display: block;
      }
    </style>
  </head>

  <body>
    <div id="box" class="box">
      <ul id="navBox" class="navBox">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <div class="active">一</div>
      <div>二</div>
      <div>三</div>
    </div>
    <script src="../../js/jquery-1.11.3.js"></script>
    <script>
      let $navList = $(".box li");
      let $tabList = $(".box div");
      // // 他会自动给每一个li加上点击事件，内部就给你循环了
      $navList.click(function () {
        // index()代表了当前点击元素的位置的索引
        //  eq()通过索引找到对应的元素
        
        // 1
        // let index = $(this).index(); // 获取当前元素对应的索引
        // $(this).addClass('active').siblings().removeClass('active');
        // $tabList.eq(index).addClass('active').siblings().removeClass('active');
        
        // 2.Jquery一个链式调用实现经典选项卡
        $(this)
          .addClass("active")
          .siblings()
          .removeClass("active")
          .parent()
          .nextAll()
          .eq($(this).index())
          .addClass("active")
          .siblings()
          .removeClass("active");
      });
    </script>
  </body>
</html>