| <！DOCTYPE html> | |
| <HTML> | |
| <HEAD> | |
| <TITLE>選項卡</ TITLE> | |
| <meta charset =“utf-8”> | |
| <style type =“text / css”> | |
| #header {width：420px; height：100px; - 背景：紅色;} | |
| #header span {display：block; width：120px; height：100px; text-align：center; font-size：30px; float：left; margin-right：20px; background：gray} | |
| #header .selected {background：yellow} | |
| #content {width：420px; -background：yellow;} | |
| #content div {width：100％; height：300px; display：none;} | |
| ＃d1 {background：pink;} | |
| #d2 {background：blue;} | |
| ＃d3 {background：green;} | |
| #content .current {display：block;} | |
| </樣式> | |
| </ HEAD> | |
| <BODY> | |
| <div id =“header”> | |
| <span class =“selected”>新聞</ span> | |
| <跨度>娛樂</跨度> | |
| <跨度>軍事</跨度> | |
| </ DIV> | |
| <div id =“content”> | |
| <div id =“d1”class =“current”>新聞</ div> | |
| <div id =“d2”>娛樂</ div> | |
| <div id =“d3”>軍事</ div> | |
| </ DIV> | |
| </ BODY> | |
| <script type =“text / javascript”> | |
| oheader =的document.getElementById（ '報頭'） | |
| ocontent =的document.getElementById（ '內容'） | |
| ASpan的= oheader.getElementsByTagName（ '跨度'） | |
| ADIV = ocontent.getElementsByTagName（ 'DIV'） | |
| for（var i = 0; i <aspan.length; i ++）{ | |
| ASpan的[I]的.index =我 | |
| //提醒（i） | |
| ASpan的[I] .onclick =函數（）{ | |
| for（var j = 0; j <aspan.length; j ++）{ | |
| //去除span的類名 | |
| ASpan的[J機] .className = ''; | |
| //去除content中的div類名 | |
| ADIV [J機] .className = ''; | |
| } | |
| this.className = '選擇'; | |
| ADIV [this.index機] .className = '當前' | |
| } | |
| } | |
| </ SCRIPT> | |
| </ HTML> |
動態添加屬性
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,