jQuery 选项卡

最新推荐文章于 2022-05-18 10:58:28 发布

痴心的萝卜

最新推荐文章于 2022-05-18 10:58:28 发布

阅读量165

点赞数

分类专栏： DOM和jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_36826618/article/details/104060645

版权

DOM和jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述
代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>选项卡</title>
  <style>
    body {
      font: 16px "Microsoft YaHei",sans-serif;
    }
    ul {
      list-style:none;
      margin: 0;
      padding: 0;
    }
    .container{
      margin: 100px auto;
      width: 800px;
    }

    .option-list {
      height: 40px;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
    }
    .option-list li{
      float: left;
      padding: 0px 20px;
      height: 39px;
      line-height: 40px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      background-color: #f5f5f5;
      cursor: pointer;
    }
    .card-list li {
      display: none;
      padding: 20px;
      height: 300px;
      border: 1px solid #ccc;
      border-top: none;
    }
    .option-list li.current{
      height: 40px;
      background-color: #fff;
    }
    .card-list li.current {
      display:block;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="option-list">
      <ul>
        <li class="current">未付款订单</li>
        <li>未发货订单</li>
        <li>未收货订单</li>
        <li>已完成订单</li>
        <li>已失效订单</li>
      </ul>
    </div>
    <div class="card-list">
      <ul>
        <li class="current">未付款订单内容</li>
        <li>未发货订单内容</li>
        <li>未收货订单内容</li>
        <li>已完成订单内容</li>
        <li>已失效订单内容</li>
      </ul>
    </div>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $(".option-list li").click(function () {
        $(this).addClass("current").siblings("li").removeClass("current");
        $(".card-list li").removeClass("current").eq($(this).index()).addClass("current");
      });
    });
  </script>
</body>
</html>

痴心的萝卜

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 选项卡

效果图代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <style> body { font: 16px "Microsoft YaHei",sans-ser...
复制链接

扫一扫