小米官网仿造（四）---jQuey

最新推荐文章于 2023-03-22 19:24:40 发布

YeSyinnng

最新推荐文章于 2023-03-22 19:24:40 发布

阅读量394

点赞数 1

分类专栏： jq

本文链接：https://blog.csdn.net/qq_39532595/article/details/86443182

版权

本文记录了在仿造小米官网过程中使用jQuery实现Tab切换功能的实践。通过部分展示的代码，展示了如何处理长列表并修复了一个发现的bug。尽管在小米官网上也存在相同的bug，但作者选择保留，继续努力完善动态网站的制作。

摘要由CSDN通过智能技术生成

这是最后一个啦，这个界面先写到这里，等我把后面的学完，再来生成动态的网站，然后，我真的好好没有做codewars了。

在这里插入图片描述

现在就是各种列表了，放一些代码，因为很长~而且很像。这里是能够实现tab栏切换
在这里插入图片描述

部分代码：

// 手机内容的脚本
$(function () {
  // 手机脚本的数组数据
  var listArr = [{
      intro: "新品",
      img: "../upload/pms_1537323963.1278763!220x220.jpg",
      name: "小米8 青春版 4GB+64GB",
      txt: "潮流镜面渐变色，2400万自拍旗舰",
      price: "1399元",
      del: ""
    },
    {
      intro: "新品",
      img: "../upload/pms_1545457703.71734471!220x220.png",
      name: "小米Play",
      txt: "内置每月10GB高速流量，高颜值流光...",
      price: "1099元",
      del: ""
    },
    {
      intro: "减300