jQuery实例——Tab选项卡

最新推荐文章于 2021-05-25 16:35:49 发布

jwz934738949

最新推荐文章于 2021-05-25 16:35:49 发布

阅读量179

点赞数

分类专栏： jQuery+Ajax

本文链接：https://blog.csdn.net/jwz934738949/article/details/108354616

版权

jQuery+Ajax 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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

    .box {
      width: 440px;
      height: 298px;
      margin: 50px auto;
      border: 1px solid #000;
    }

    .nav > li {
      list-style: none;
      width: 110px;
      height: 50px;
      background-color: orange;
      text-align: center;
      line-height: 50px;
      float: left;
    }

    .nav > .current {
      background-color: #cccccc;
    }

    .content > li {
      list-style: none;
      display: none;
    }

    .content > .show {
      display: block;
    }

    .content > li > img {
      width: 440px;
      height: 248px;
    }
  </style>
  <script src="./js/jquery-3.5.1.js"></script>
  <script>
    $(function () {
      $("li").mouseenter(function () {
        // 添加背景颜色
        $(this).addClass("current")
        // 将其余的li标签的背景颜色移出
        $(this).siblings().removeClass("current")
        //获取li的当前索引值
        const index = $(this).index()
        //获取当前的li元素
        const $li = $(".content>li").eq(index)
        // 让li中的内容显示
        $li.addClass("show")
        // 将其他图片隐藏
        $li.siblings().removeClass("show")
      })
    })
  </script>
</head>
<body>
<div class="box">
  <ul class="nav">
    <li class="current">H5+H3</li>
    <li>jQuery</li>
    <li>C语言</li>
    <li>Go语言</li>
  </ul>
  <ul class="content">
    <li class="show">
      <img src="images/h5.jpg" alt="">
    </li>
    <li>
      <img src="images/jquery.jpg" alt="">
    </li>
    <li>
      <img src="images/c.jpg" alt="">
    </li>
    <li>
      <img src="images/go.jpg" alt="">
    </li>
  </ul>
</div>
</body>
</html>