first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/tabspuls.html
+++ b/历届学生/fontendseven/项目练习/个人练习/蔡敏/练习/js/tabspuls.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body,
+        ul,
+        li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .tabs_title {
+            display: flex;
+        }
+
+        .tabs_title li {
+            margin-right: 15px;
+        }
+
+        .title_active {
+            color: red;
+        }
+
+        .tabs_content ul {
+            display: none;
+        }
+
+        .content_active {
+            display: block !important;
+        }
+    </style>
+</head>
+
+<body>
+    <ul class="tabs_title">
+
+    </ul>
+
+    <div class="tabs_content">
+
+
+    </div>
+</body>
+<script>
+
+    var tabs = [
+        {
+            title: '精选',
+            content: [
+                { text: '精选1的标题', content: '精选1的简介', time: '精选1的发布时间' },
+                { text: '精选2的标题', content: '精选2的简介', time: '精选2的发布时间' },
+            ]
+        },
+        {
+            title: '美食',
+            content: [
+                { text: '美食1的标题', content: '美食1的简介', time: '美食1的发布时间' },
+                { text: '美食2的标题', content: '美食2的简介', time: '美食2的发布时间' },
+                { text: '美食3的标题', content: '美食3的简介', time: '美食3的发布时间' },
+            ]
+        },
+        {
+            title: '百货',
+            content: [
+                { text: '百货1的标题', content: '百货1的简介', time: '百货1的发布时间' },
+            ]
+        },
+        {
+            title: '个护',
+            content: [
+                { text: '个护1的标题', content: '个护1的简介', time: '个护1的发布时间' },
+                { text: '个护2的标题', content: '个护2的简介', time: '个护2的发布时间' },
+                { text: '个护3的标题', content: '个护3的简介', time: '个护3的发布时间' },
+                { text: '个护4的标题', content: '个护4的简介', time: '个护4的发布时间' },
+                { text: '个护5的标题', content: '个护5的简介', time: '个护5的发布时间' },
+                { text: '个护6的标题', content: '个护6的简介', time: '个护6的发布时间' },
+            ]
+        }
+    ];
+
+
+    function renderTitle() {
+        tabs.forEach(function (v, i) {
+            document.querySelector(".tabs_title").innerHTML += `<li class="${i == 0 ? 'title_active' : ""}">${v.title}</li>`
+
+        });
+
+        renderContent()
+        var title = document.querySelectorAll(".tabs_title li")
+        var content = document.querySelectorAll(".tabs_content ul")
+        console.log(content);
+        title.forEach(function (v, i) {
+            v.onclick = function () {
+                title.forEach(function (item, index) {
+                    item.className = ""
+                    content[index].className = ""
+                })
+                v.className = "title_active"
+                content[i].className = "content_active"
+
+            }
+        })
+    }
+
+    function renderContent() {
+        tabs.forEach(function (v, i) {
+            document.querySelector(".tabs_content").innerHTML += `
+             <ul class="${i==0 ? "content_active" : ""}">
+               ${v.content.map (function(val,index) {
+                   return `
+                   <li>
+                       <h2>${val.text}</h2>
+                       <p>${val.content}</p>
+                       <span>${val.time}</span>
+                   </li>`
+               }).toString().replaceAll(",", "") }
+                  
+            </ul>`
+        })
+    }
+
+
+    renderTitle()
+    
+</script>
+
+</html>