Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
VIP20
6
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

new

zsydgithub 3 жил өмнө
parent
e70677007f
commit
7d81fdb30d
2 өөрчлөгдсөн 103 нэмэгдсэн , 1 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 34 1
      6_Dom/2_练习.html
  2. 69 0
      6_Dom/3_选项卡.html

+ 34 - 1
6_Dom/2_练习.html
Файл харах 

@@ -1,12 +1,45 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>Document</title>
 
   <title>Document</title>
 
+  <style>
 
+    #div1 {
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      top: 200px;
 
+      left: 100px;
 
+      position: absolute
 
+    }
 
+  </style>
 
+  <script>
 
+
 
+    //等页面所有的东西全部加载完毕，执行里面的内容
 
+    // window.onload = function () {
 
+    //   var btn = document.getElementById('btn')
 
+    //   console.log(btn)
 
+    // }
 
+  </script>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
-  
+  <button id="btn">点击</button>
 
+  <div id="div1">
 
+  </div>
 
+  <script>
 
+    var btn = document.getElementById('btn')
 
+    console.log(btn)
 
+    // var div1 = document.getElementById('div1')
 
+    // btn.onclick = function(){
 
+    //   div1.style.background = 'blue'
 
+    //   div1.style.top = '400px'
 
+    //   div1.style.left = '250px'
 
+    // }
 
+  </script>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>

+ 69 - 0
6_Dom/3_选项卡.html
Файл харах 

@@ -0,0 +1,69 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    ul{
 
+      list-style: none;
 
+    }
 
+    #btn{
 
+      overflow: hidden;
 
+    }
 
+    #btn li {
 
+      width: 50px;
 
+      height: 30px;
 
+      background: aquamarine;
 
+      text-align: center;
 
+      line-height: 30px;
 
+      border: 1px solid #CCC;
 
+      border-radius: 10px;
 
+      float: left;
 
+    }
 
+    #btn .selected{
 
+      background: orange;
 
+      color: white;
 
+    }
 
+    #div1{
 
+      width: 350px;
 
+      height: 200px;
 
+      border: 1px solid #ccc;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="container">
 
+    <ul id="btn">
 
+      <li class="selected">时事</li>
 
+      <li>新闻</li>
 
+      <li>体育</li>
 
+    </ul>
 
+    <div id="div1">
 
+      <div>时事内容</div>
 
+      <div>新闻内容</div>
 
+      <div>体育内容</div>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var btn = document.getElementById('btn')
 
+    var btns = btn.getElementsByTagName('li')
 
+
 
+    for(var i=0;i<btns.length;i++){
 
+      btns[i].onclick = function(){
 
+        //this 点谁就是谁
 
+        for(var j=0;j<btns.length;j++){
 
+          btns[j].className = ''
 
+        }
 
+        this.className = 'selected'
 
+      }
 
+    }
 
+    
+  </script>
 
+</body>
 
+</html>