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