jQuery 选项卡

标签: DOM和jQuery

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

<!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>
版权声明:本文为qq_36826618原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36826618/article/details/104060645