first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/18课程/class18_2/课程/2020-12-23/index.html
+++ b/历届学生/18课程/class18_2/课程/2020-12-23/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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 {
+            overflow: hidden;
+        }
+        .tabs_title li {
+            float: left;
+            margin-right: 10px;
+        }
+        .title_active {
+            color: red;
+        }
+      
+        .tabs_content li{
+            display: none;
+        }
+        .content_active {
+            display: block !important;
+        }
+    </style>
+</head>
+<body>
+    
+
+    <ul class="tabs_title">
+    </ul>
+
+    <ul class="tabs_content">
+
+    </ul>
+
+</body>
+<script>
+    var TabsList = [
+        { 
+            title: '全部',
+            content: [
+                { text: '全部的内容1', id: 1 },
+                { text: '全部的内容2', id: 2 },
+                { text: '全部的内容3', id: 3 }
+            ]
+        },
+        { 
+            title: '安全',
+            content: [
+                { text: '安全的内容1', id: 3 },
+                { text: '安全的内容2', id: 4 }
+            ]
+        },
+        { 
+            title: '论坛',
+            content: [
+                { text: '论坛的内容1', id: 5 },
+                { text: '论坛的内容2', id: 6 }
+            ]
+        }
+    ];
+    var tabsTitle = document.querySelector(".tabs_title");
+    var tabsContent = document.querySelector(".tabs_content");
+
+    function RenderTitle() {
+      TabsList.forEach(function (v,i){
+        console.log(tabsTitle)
+        tabsTitle.innerHTML += `<li class="${i == 0 ? 'title_active' : '' }">${v.title}</li>`
+      });
+
+      RenderContent()
+    }
+
+    function RenderContent() {
+      TabsList.forEach(function (v,i){
+        tabsContent.innerHTML +=
+          `
+           <li class="${i == 0 ? 'content_active' : ''}">
+               ${
+                 v.content.map(function (val,index){
+                   return ` <div class="item">
+                                <a href="./info.html?id=${val.id}">${val.text}</a>
+                            </div>`
+                 }).toString().replace(/,/ig, "")
+               }
+
+            </li>
+          `
+      });
+
+      TabsInit()
+
+    }
+
+    function TabsInit() {
+      var li = document.querySelectorAll(".tabs_title li");
+      var contentLi = document.querySelectorAll(".tabs_content li")
+      li.forEach(function (v,i){
+        v.onclick = function () {
+          li.forEach(function (val,index){
+            val.className = "";
+            contentLi[index].className = ""
+          })
+          v.className = "title_active";
+          contentLi[i].className = "content_active"
+        }
+      })
+    }
+
+    RenderTitle()
+
+
+</script>
+</html>