用jQuery实现tab切换

最新推荐文章于 2023-10-08 19:49:47 发布

就叫铭铭之中吧

最新推荐文章于 2023-10-08 19:49:47 发布

阅读量78

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/mahuatengbukui/article/details/118361595

版权

  <style>
      .apply-record {
        width: 400px;
      }
      .apply-record .tab {
        height: 60px;
        line-height: 60px;
      }
      .apply-record .tab .tab-item {
        list-style: none;
        display: inline-block;
        width: 100px;
        text-align: center;
        font-size: 20px;
      }
      .apply-record .tab .tab-item.active {
        color: #3f86ff;
        border-bottom: 3px solid #0000ff;
      }
      .products .mainCont {
        display: none;
        width: 100%;
        overflow: auto;
        text-align: center;
      }
      .products .mainCont.selected {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="apply-record">
      <ul class="tab">
        <li class="tab-item active">页面一</li>
        <li class="tab-item">页面二</li>
        <li class="tab-item">页面三</li>
      </ul>
      <div class="content products">
        <div class="mainCont selected">页面一</div>

        <div class="mainCont">页面二</div>

        <div class="mainCont">页面三</div>
      </div>
    </div>
  </body>
</html>
<script src="../jquery-3.6.0.min.js"></script>
<script>
  $(function () {
    $(".tab-item").click(function () {
      $(".mainCont").hide();
      $(".mainCont").eq($(this).index()).show();
    });
  });
</script>

就叫铭铭之中吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jQuery实现tab切换

<style> .apply-record { width: 400px; } .apply-record .tab { height: 60px; line-height: 60px; } .apply-record .tab .tab-item { list-style: none; display: inline-block; w...
复制链接

扫一扫