我不想秃头i 2021-08-02 23:56 采纳率: 66.7%
浏览 81
已结题

实现前端效果请教一下

img
页面中“全部产品”“进行中的产品”“即将开始的产品”“已结束的产品”可以点击,点击之后要求下方的内容随着变化。

  • 写回答

7条回答 默认 最新

  • 上官熊猫 2021-08-03 09:51
    关注
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
        <meta name="renderer" content="webkit" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <title>html</title>
        <style>
          * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
          }
          body {
            padding: 100px;
          }
          ul {
            list-style: none;
          }
          .tab_list {
            display: flex;
          }
          .tab_list .item {
            line-height: 40px;
            padding: 0 20px;
            margin-right: 6px;
            background-color: #ebebeb;
            text-align: center;
            font-size: 16px;
            color: #4a6689;
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.4s;
          }
          .tab_list .active {
            background-color: #15b9e2;
            color: #fff;
          }
          .content_list .item {
            display: none;
            min-height: 300px;
            border: 1px solid #ddd;
          }
          .content_list .active {
            display: block;
          }
        </style>
      </head>
      <body>
        <ul class="tab_list">
          <li class="item active">全部产品</li>
          <li class="item">进行中产品</li>
          <li class="item">即将开始的产品</li>
          <li class="item">已结束产品</li>
        </ul>
        <ul class="content_list">
          <li class="item active">全部产品的内容</li>
          <li class="item">进行中产品的内容</li>
          <li class="item">即将开始的产品的内容</li>
          <li class="item">已结束产品的内容</li>
        </ul>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <script>
          //原生版本
          //   let tabs = document.querySelectorAll(".tab_list .item");
          //   let contents = document.querySelectorAll(".content_list .item");
          //   for (let i = 0; i < tabs.length; i++) {
          //     tabs[i].onclick = function() {
          //       tabs.forEach((item, index) => {
          //         if (i === index) {
          //           item.classList.add("active");
          //         } else {
          //           item.classList.remove("active");
          //         }
          //       });
          //       contents.forEach((item, index) => {
          //         if (i == index) {
          //           item.classList.add("active");
          //         } else {
          //           item.classList.remove("active");
          //         }
          //       });
          //     };
          //   }
    
          // jQuery版本
          $(".tab_list").on("click", "li", function() {
            let index = $(this).index();
            $(this)
              .addClass("active")
              .siblings()
              .removeClass("active");
    
            $(".content_list .item")
              .eq(index)
              .addClass("active")
              .siblings()
              .removeClass("active");
          });
        </script>
      </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题?

问题事件

  • 系统已结题 8月11日
  • 已采纳回答 8月3日
  • 创建了问题 8月2日

悬赏问题

  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方