Ⅰ、問(wèn)題描述：
1、用JavaScript + html + css 實(shí)現(xiàn)，選項(xiàng)卡操作；
2、分析：
A、用 html + css 實(shí)現(xiàn)布局(盒子的布置，空間的分配等)；
B、用 JavaScript 中的 DOM 操作，實(shí)現(xiàn)點(diǎn)擊不同選項(xiàng)顯示不同標(biāo)題欄的功能；
Ⅱ、實(shí)現(xiàn)過(guò)程如下：
1、運(yùn)行軟件VScode，親測(cè)可實(shí)現(xiàn)；
2、運(yùn)行代碼：
<!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; font-family: '微軟雅黑'; font-size: 14px; } #container { width: 398px; margin: 100px auto; } #container a { display: block; width: 98px; height: 42px; line-height: 42px; text-align: center; float: left; border-top: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; color: #333333; text-decoration: none; } #container a:hover { color: #ff4400; } .content { width: 355px; height: 140px; text-align: center; border-right: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; padding: 30px 0 0 40px; display: none; } .clear { clear: left; } #container a.on { background: #ff4400; color: #fff; } </style> </head> <body> <div id="container"> <a href="#" class="on" >充話(huà)費(fèi)</a> <!-- 類(lèi)為：on 的 a 標(biāo)簽； --> <a href="#" >充流量</a> <a href="#" >充固話(huà)</a> <a href="#" style="border-right: 1px solid #ff4400;">充寬帶</a> <!-- style 操作目的：使得顯示的盒子最右邊有邊框； --> <div class="clear"></div> <div class="content" style="display: block;"> <!-- style 操作目的：使第一個(gè)圖片在初始狀態(tài)時(shí)，能顯示出來(lái)； --> <img src="images/1.png" width="355px"/> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/2.png" width="355px" /> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/3.png" width="355px" /> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> <div class="content"> <img src="images/4.png" width="355px" /> <!-- 該位置存放的是：圖片的地址 (即：里面加載的是圖片信息) --> </div> </div> <script> var as = document.getElementsByTagName('a'); var divs = document.getElementsByClassName('content'); for(var i=0; i<as.length; i++) { as[i].index = i; as[i].onclick = function() { for(var j=0; j<as.length; j++) { as[j].className = ''; divs[j].style.display = 'none'; } this.className = 'on'; divs[this.index].style.display = 'block'; } } </script> </body> </html>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
3、結(jié)果展示：
A、默認(rèn)的顯示結(jié)果：
B、點(diǎn)擊 ‘充流量’ 后的顯示結(jié)果：
C、點(diǎn)擊 ‘充固話(huà)’ 后的顯示結(jié)果：
D、點(diǎn)擊 ‘充寬帶’ 后的顯示結(jié)果：
4、可能存在的問(wèn)題：
A 、如果自己也加載了圖片信息，仍然不能顯示該結(jié)果，可以直接下載我傳上去的文檔(可能解釋的更詳細(xì))，可以直接在 VScode 等其他軟件上加載運(yùn)行；
地址為：
https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501
Ⅲ、小結(jié)：
哪里有不對(duì)或不合適的地方，還請(qǐng)大佬們多多指點(diǎn)和交流！
https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
轉(zhuǎn)自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
