Почетна Преглед Помоћ
Пријавите се
lovecoding
/
W260426
8
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

admin

fengchuanyu пре 1 дан
родитељ
51d4c2862e
комит
f469e0c6a1
2 измењених фајлова са 124 додато и 0 уклоњено
Један поглед Покажи статистику Diff
  1. 40 0
      4_BOM&DOM/14_控制类.html
  2. 84 0
      4_BOM&DOM/练习题5_tab标签页.html

+ 40 - 0
4_BOM&DOM/14_控制类.html
Прегледај датотеку 

@@ -0,0 +1,40 @@
 
+<!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>
 
+        .box{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+        }
 
+        .active{
 
+            background-color: blue;
 
+        }
 
+        .div1{
 
+            font-size: 50px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box div1">hello</div>
 
+    <button id="btn">切换类名</button>
 
+
 
+    <script>
 
+        // 获取元素
 
+        var box = document.querySelector(".box");
 
+        var btn = document.querySelector("#btn");
 
+
 
+        // 绑定事件
 
+        btn.onclick = function(){
 
+            // 操作类 classList 方法
 
+            // add()方法可以添加类名 只是在基础上添加类名 不会覆盖之前的类名
 
+            // box.classList.add("active");
 
+            // remove() 
+            // box.classList.remove("div1");
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 84 - 0
4_BOM&DOM/练习题5_tab标签页.html
Прегледај датотеку 

@@ -0,0 +1,84 @@
 
+<!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>
 
+        .tab-page{
 
+            width: 600px;
 
+            height: 400px;
 
+            border:3px solid #000;
 
+            margin: 100px auto;
 
+        }
 
+        .tab-nav{
 
+            height: 60px;
 
+            background-color: #333;
 
+        }
 
+        .tab-nav .tab-item{
 
+            float: left;
 
+            height: 60px;
 
+            width: 120px;
 
+            text-align: center;
 
+            line-height: 60px;
 
+            color: #fff;
 
+        }
 
+        .tab-nav .tab-item.active{
 
+            background-color: #ddd;
 
+            color: #000;
 
+        }
 
+        .tab-content{
 
+            padding:20px;
 
+        }
 
+        .tab-content .tab-content-item{
 
+            display: none;
 
+        }
 
+        .tab-content .tab-content-item.active{
 
+            display: block;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="tab-page">
 
+        <div class="tab-nav">
 
+            <div class="tab-item active">第一节课</div>
 
+            <div class="tab-item">第二节课</div>
 
+            <div class="tab-item">第三节课</div>
 
+        </div>
 
+        <div class="tab-content">
 
+            <div class="tab-content-item active">第一节课的内容</div>
 
+            <div class="tab-content-item">第二节课的内容</div>
 
+            <div class="tab-content-item">第三节课的内容</div>
 
+        </div>
 
+    </div>
 
+
 
+    <script>
 
+        // 获取元素
 
+        // tab按钮
 
+        var tabNav = document.querySelectorAll(".tab-item");
 
+        // tab内容
 
+        var tabContent = document.querySelectorAll(".tab-content-item");
 
+
 
+        // 绑定事件
 
+        for(var i = 0;i<tabNav.length;i++){
 
+            tabNav[i].index = i
 
+            tabNav[i].onmouseover = function(){
 
+                // 去除所有其他tab按钮的选中状态
 
+                for(var j = 0;j<tabNav.length;j++){
 
+                    tabNav[j].setAttribute("class","tab-item");
 
+                    tabContent[j].setAttribute("class","tab-content-item")
 
+                }
 
+                // console.log(this.index);
 
+                // 切换tab按钮的选中状态
 
+                this.setAttribute("class","tab-item active");
 
+                // 切换content内容的选中状态
 
+                tabContent[this.index].setAttribute("class","tab-content-item active");
 
+            }
 
+
 
+        }
 
+    </script>
 
+</body>
 
+
 
+</html>