first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/韩想/每日课程/2020-08-09/tabs优化.html
+++ b/历届学生/韩想/每日课程/2020-08-09/tabs优化.html
@@ -0,0 +1,130 @@
+<!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>
+        body,ul,li{
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+        ul {
+            overflow: hidden;
+        }
+        .tab_title li {
+            margin-right: 15px;
+        }
+        .tab_title li,
+        .tab_content li {
+            float: left;  
+        }
+        .tab_content .tab_item {
+            display: none;
+        }
+        .title_active {
+            color: red !important;
+        }
+        .content_active {
+            display: block !important;
+        }
+    </style>
+</head>
+<body>
+    
+
+    <div class="tab">
+        <ul class="tab_title">
+           
+        </ul>
+
+    
+        <div class="tab_content">
+           
+        </div>
+ 
+    </div>
+
+</body>
+<script>
+
+    // json 数据
+    var tabs = [
+        { 
+            title: '百货', 
+            content: [
+                { text: '百货的内容1' },
+                { text: '百货的内容2' },
+            ] 
+        },
+        { 
+            title: '宠物', 
+            content: [
+                { text: '宠物的内容1' },
+                { text: '宠物的内容2' },
+                { text: '宠物的内容3' }
+            ] 
+        },
+        { 
+            title: '生活', 
+            content: [
+                { text: '生活的内容1' },
+                { text: '生活的内容2' },
+                { text: '生活的内容3' }
+            ] 
+        },
+    ];
+
+    var currentIndex = 0;
+
+    // 渲染tabs的标题
+    function RenderTitle() {
+        var ul = document.querySelector(".tab_title");
+        tabs.forEach(function(val, index, arr){
+            ul.innerHTML += `<li class="${ index == 0 ? 'title_active' : '' }">${val.title}</li>`
+        });
+
+        var li = document.querySelectorAll(".tab_title li");
+        li.forEach(function(c,r) {
+            c.onclick = function () {
+                li.forEach(function(e,v) {
+                    e.className = ""
+                })
+                c.className = "title_active"
+                currentIndex = r
+                innerContent()
+            }
+        });
+
+    }
+
+    function RenderContent() {
+        // 完成第一步tab_item的渲染
+        var contentFather = document.querySelector(".tab_content");
+        tabs.forEach(function(v,i){
+            contentFather.innerHTML += `<div class="tab_item ${ i == 0 ? 'content_active' : ''}"></div>`
+        });
+        innerContent();
+    }
+
+    function innerContent() {
+        var tabItem = document.querySelectorAll(".tab_content .tab_item")
+        tabItem.forEach(function(t,b){
+            t.className = "tab_item"
+        });
+        
+        tabItem[currentIndex].className = "tab_item content_active";
+
+        if (tabItem[currentIndex].innerHTML.length == 0) {
+            tabs[currentIndex].content.forEach(function(v,i){
+                tabItem[currentIndex].innerHTML += `<p>${v.text}</p>`
+            });
+        }
+    }
+
+    RenderTitle()
+    RenderContent()
+
+</script>
+</html>