first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/陈一航/2020-04-02/tabs.html
+++ b/历届学生/陈一航/2020-04-02/tabs.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>tabs切换</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+        .tabs_title {
+            overflow: hidden;
+        }
+        .tabs_title li {
+            float: left;
+            margin-right: 10px;
+        }
+        .tabs_content li {
+            display: none;
+        }
+        .active_title {
+            color: red;
+        }
+        .active_content {
+            display: block !important;
+        }
+    </style>
+</head>
+<body>
+    
+
+    <div class="tabs">
+
+        <ul class="tabs_title">
+           
+        </ul>
+
+        <ul class="tabs_content">
+           
+        </ul>
+
+    </div>
+
+
+</body>
+
+<script>
+
+    // 假装这是后端给我们的json数据
+    var Tabs = {
+        status: 200,
+        result: {
+            tabs_title: [
+                { id: 1, title: '公告' },
+                { id: 1, title: '规则' },
+                { id: 1, title: '论坛' },
+                { id: 1, title: '论坛2' }
+            ],
+            tabs_content: [
+                { id: 1, title: '公告的内容' },
+                { id: 1, title: '规则的内容' },
+                { id: 1, title: '论坛的内容' },
+                { id: 1, title: '论坛的内容2' }
+            ]
+        }
+    };
+
+    // 获取两个父容器ul，为 innerHTML 做准备
+    var TabsTitle = document.querySelector(".tabs_title");
+    var TabsContent = document.querySelector(".tabs_content");
+
+    // 根据数据渲染标题的li标签
+    function RenderTitle() {
+        Tabs.result.tabs_title.forEach( function(val,index) {
+            TabsTitle.innerHTML += `<li class="${ index == 0 ? 'active_title' : '' }">${val.title}</li>`
+        } )
+    }
+
+    // 根据数据渲染内容的li标签
+    function RenderContent() {
+        Tabs.result.tabs_content.forEach( function(val,index) {
+            TabsContent.innerHTML += `<li class="${ index == 0 ? 'active_content' : '' }">${val.title}</li>`
+        } )
+    }
+
+    // 绑定点击事件，注意：一定要在 渲染标题和内容之后运行
+    function BindClick() {
+        // 获取标题的所有li标签
+        var TabsTitleLi = document.querySelectorAll(".tabs_title li");
+        // 获取内容的所有li标签
+        var TabsContentLi = document.querySelectorAll(".tabs_content li");
+        
+        TabsTitleLi.forEach( function(val,index) {
+
+            val.onmouseover = function () {
+
+                TabsTitleLi.forEach(function(v, i){
+                    v.className = ""
+                    TabsContentLi[i].className = ""
+                })
+
+                val.className = "active_title"
+                TabsContentLi[index].className = "active_content"
+            }
+
+        } )
+    }
+
+    
+    RenderTitle()
+    RenderContent()
+
+    BindClick()
+
+
+</script>
+</html>