first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/吴欣阳/每天课程/2021-06-11/tabs.html
+++ b/历届学生/吴欣阳/每天课程/2021-06-11/tabs.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <style>
+    body,ul,li,p {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+    .tabs_title {
+        display: flex;
+    }
+    .tabs_title li {
+        margin-right: 10px;
+    }
+    .tabs_content li {
+        display: none;
+    }
+    .content_active {
+        display: block !important;
+    }
+    .title_active {
+        color: red;
+    }
+  </style>
+</head>
+<body>
+  <ul class="tabs_title">
+    <li class="title_active">公告</li>
+    <li>规则</li>
+    <li>安全</li>
+    <li>公益</li>
+  </ul>
+
+  <ul class="tabs_content">
+    <li class="content_active">公告的内容</li>
+    <li>规则的内容</li>
+    <li>安全的内容</li>
+    <li>公益的内容</li>
+  </ul>
+</body>
+<script>
+  // 第一步：为标题的所有li标签绑定点击事件
+  // 第二步：为点击的li加上激活类名，并删除其他li上的类名
+
+  // 获取 tabs_title 里面的所有li标签
+  var TitleLi = document.querySelectorAll(".tabs_title li")
+  var ContentLi = document.querySelectorAll(".tabs_content li")
+
+  // 遍历所有li标签
+  TitleLi.forEach(function (v,i) {
+
+      // 为每个li标签绑定点击事件
+      v.onclick = function () {
+          // 清除所有li标签上的类名
+          TitleLi.forEach(function (item,index) {
+              item.className = ""
+              ContentLi[index].className = ""
+          })
+
+          // 给你点击的那个li加类名
+          v.className = "title_active"
+          ContentLi[i].className = "content_active"
+      }
+  })
+</script>
+</html>