14 DOM案例 

模态框案例
打开网页时，点击登录显示一个背景图，中心 弹出一个登录框，登录框 右上角有关闭按钮 点击关闭 关闭登录框






 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-U-Compatible" content="IE-edge">
 6     <meta name="viewport" content="width=device-width,initial-scale=1">
 7     <title>模态框案例</title>
 8     <style type="text/css">
 9         *{
10             padding:0;
11             margin: 0;
12         }
13         .bgc{
14             background-color: #b0b0b0;
15         }
16         #box{
17             position: relative;
18             height:300px;
19             width: 300px;
20             border: 1px solid red;
21             margin:0 auto;
22             background-color: #fff;
23             display: none;
24         }
25         #close{
26             cursor: pointer;
27             position: absolute;
28             right: 0;
29             top: 0;
30             height: 30px;
31             width: 20px;
32             background-color: red;
33             line-height: 30px;
34             text-align : center;
35         }
36     </style>
37 </head>
38 <body>
39     <!--打开网页时，点击登录显示一个背景图，中心 弹出一个登录框，登录框 右上角有关闭按钮 点击关闭 关闭登录框-->
40     <button id="btn" style="display: block;">登陆</button>
41     <div id="box">
42         <span id="close">X</span>
43     </div>
44 </body>
45 <script type="text/javascript">
46     function $(id) {
47         return document.getElementById(id)
48     }
49     $('btn').onclick = function () {
50         document.documentElement.style.backgroundColor = '#b0b0b0';
51         this.style.display = 'none';
52         $('box').style.display = 'block';
53     };
54     $('close').onclick = function () {
55         $('box').style.display = 'none';
56         $('btn').style.display = 'block';
57         document.documentElement.style.backgroundColor = '#fff';
58     }
59 </script>
60 </html>



View Code





模拟hover选择器


需求： 鼠标悬浮 哪个button上，该button变成绿色的背景（添加类 active）








 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-U-Compatible" content="IE-edge">
 6     <meta name="viewport" content="width=device-width,initial-scale=1">
 7     <title>模拟hover选择器</title>
 8     <style type="text/css">
 9         button{
10             margin: 10px;
11             width: 100px;
12             height: 40px;
13             cursor: pointer;
14         }
15         button.active{
16             background-color: green;
17         }
18 
19     </style>
20 </head>
21 <body>
22     <button class="active">按钮1</button>
23     <button>按钮2</button>
24     <button>按钮3</button>
25     <button>按钮4</button>
26     <button>按钮5</button>
27 </body>
28 <script type="text/javascript">
29     // 需求： 鼠标悬浮 哪个button上，该button变成绿色的背景（添加类 active）
30     var tmp = document.getElementsByTagName('button');
31     for(var i=0;i<tmp.length;i++){
32         tmp[i].onmouseover = function () {
33             for(var j=0;j<tmp.length;j++){
34                 tmp[j].className = '';
35             }
36             this.className = 'active';
37         }
38     }
39 </script>
40 </html>



View Code




 


选项卡


需求：  鼠标放在上面，li上  li本身变色（添加类） 对应下面p也显示出来（添加类）
思路： 1.点亮上面的盒子   2 利用索引值来显示下面的盒子






 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-U-Compatible" content="IE-edge">
 6     <meta name="viewport" content="width=device-width,initial-scale=1">
 7     <title>选项卡</title>
 8     <style type="text/css">
 9     * {
10         padding: 0;
11         margin: 0;
12     }
13 
14     ul {
15         list-style: none;
16     }
17 
18     #tab {
19         width: 480px;
20         margin: 20px auto;
21         border: 1px solid red;
22     }
23 
24     ul {
25         width: 100%;
26         overflow: hidden;
27     }
28 
29     #tab ul li {
30         float: left;
31         width: 160px;
32         height: 60px;
33         line-height: 60px;
34         text-align: center;
35         background-color: #ccc;
36     }
37 
38     #tab ul li a {
39         color: black;
40         display: block;
41         width: 100%;
42         height: 100%;
43         text-decoration: none;
44     }
45 
46     #tab ul li.active {
47         background-color: red;
48     }
49 
50     #tab p {
51         display: none;
52         height: 200px;
53         text-align: center;
54         line-height: 200px;
55         background-color: red;
56     }
57 
58     #tab p.active {
59         display: block;
60     }
61     </style>
62 </head>
63 
64 <body>
65     <div id="tab">
66         <ul>
67             <li class="active">
68                 <a href="javascript:void(0);">首页</a>
69             </li>
70             <li>
71                 <a href="javascript:void(0);">新闻</a>
72             </li>
73             <li>
74                 <a href="javascript:void(0);">图片</a>
75             </li>
76         </ul>
77         <p class="active">首页内容</p>
78         <p>新闻内容</p>
79         <p>图片</p>
80     </div>
81 </body>
82 <script type="text/javascript">
83     // 需求：  鼠标放在上面，li上  li本身变色（添加类） 对应下面p也显示出来（添加类）
84     // 思路： 1.点亮上面的盒子   2 利用索引值来显示下面的盒子
85     var tmp = document.getElementsByTagName('li');
86     var tmp2 = document.getElementsByTagName('p');
87     for(var i=0;i<tmp.length;i++){
88         tmp[i].index = i;  // 将 i保存到 li标签对象中  这个步骤很关键
89         tmp[i].onmouseover = function () {
90             for(var j=0;j<tmp.length;j++){
91                 tmp[j].className = '';
92                 tmp2[j].className = '';
93             }
94             this.className = 'active';
95             tmp2[this.index].className = 'active';
96         }
97     }
98 </script>
99 </html>



View Code




 







		

		
posted @ 
2019-07-02 10:46 
毛斯钢 
阅读(121) 
评论(0) 
编辑 
收藏 
举报