first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/刘合群/2019-08-26/index.html
+++ b/历届学生/刘合群/2019-08-26/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Tabs</title>
+  <style>
+    body,ul {
+      padding: 0;
+      margin: 0;
+    }
+    li {
+      list-style: none;
+    }
+    .main {
+      width: 400px;
+      height: 300px;
+      border: 1px solid #000;
+      margin: 20px auto;
+    }
+    .tabs-title{
+      width: 100%;
+      height: 38px;
+    }
+    .tabs-title li {
+      float: left;
+      margin-right: 10px;
+    }
+    .tabs-content li {
+      float: left;
+      display: none;
+    }
+    .titleon {
+      color: red;
+    }
+    .contenton {
+      display: inline-block !important;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <ul class="tabs-title">
+      <li class="titleon">社会</li>
+      <li>娱乐</li>
+      <li>体育</li>
+      <li>热点</li>
+    </ul>
+
+    <ul class="tabs-content">
+      <li class="contenton">社会的内容</li>
+      <li>娱乐的内容</li>
+      <li>体育的内容</li>
+      <li>热点的内容</li>
+    </ul>
+  </div>
+</body>
+<script>
+  // 通过js操作网页的过程，叫做 dom操作
+
+  var TabsTitle = document.querySelectorAll(".tabs-title li");
+  var TabsContent = document.querySelectorAll(".tabs-content li");
+
+  TabsTitle.forEach(function(value,index) {
+    value.onclick = function () {
+      TabsTitle.forEach(function(val,ind) {
+        val.className = ""
+        TabsContent[ind].className = ""
+      })
+      value.className = "titleon"
+      TabsContent[index].className = "contenton"
+    }
+  })
+
+</script>
+</html>