我不想秃头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日

悬赏问题

  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 Macbookpro 连接热点正常上网，连接不了Wi-Fi。
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
  • ¥15 linux驱动，linux应用，多线程
  • ¥20 我要一个分身加定位两个功能的安卓app
  • ¥15 基于FOC驱动器，如何实现卡丁车下坡无阻力的遛坡的效果
  • ¥15 IAR程序莫名变量多重定义
  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题