实现前端效果请教一下

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

<!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>

tab切换~

可以使用ui库直接搬砖使用，纯javascript推荐layerui，vue react的推荐ant，如果你是自己写逻辑你可以回复我（评论），望采纳

附链接

layer 选项卡

https://www.layui.com/doc/element/tab.html

ant 标签页

https://1x.antdv.com/components/tabs-cn/

回答不易点个采纳呗~^-^

选项卡实现。可以自己实现一个。搜一下js选项卡就能找到

建议直接采用现成的UI组件库的组件。
自己写的话，纯js的逻辑思路大概是这样的：
1、定义两个样式名称，一个是四个框的统一样式，一个是被选中时的样式。
2、给每张选项卡定义一个唯一标识。
3、定义点击事件，被点击时：
a、要先把四个的样式全都设置成统一样式（俗称：排他），再设置当前点击的卡为被选中的样式。
b、通过唯一标识来做判断，显示\隐藏\替换下方的内容

选项卡应该算是最基础的交互效果，可以先想一下实现逻辑。再试着自己写一下，实现不会，看看别人写，再自己研究研究
原生js写法可以参考这个：https://www.jb51.net/article/146020.htm

我是用jq，你可以看看
<div id="id">
      <button class="active">壹</button>
      <button>贰</button>
      <button>叁</button>
      <button>肆</button>
  </div>
  <div title="内容" id="txt"></div>
 <script>
     //首先初始化、用对应名字进行初始化
     console.log($("#txt").html($("#id").find(".active").html()))

     $("#id button").click(function(){//点击按钮获取对应内容
        $("#txt").html($(this).html())
     })
 </script>