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

悬赏问题

  • ¥15 ios可以实现ymodem-1k协议 1024字节传输吗？
  • ¥300 寻抓云闪付tn组成网页付款链接
  • ¥15 请问Ubuntu要怎么安装chrome呀？
  • ¥15 视频编码 十六进制问题
  • ¥15 Xsheii7我安装这个文件的时候跳出来另一个文件已锁定文件的无一部分进程无法访问。这个该怎么解决
  • ¥15 unity terrain打包后地形错位，跟建筑不在同一个位置，怎么办
  • ¥15 FileNotFoundError 解决方案
  • ¥15 uniapp实现如下图的图表功能
  • ¥15 u-subsection如何修改相邻两个节点样式
  • ¥30 vs2010开发 WFP（windows filtering platform）