简单选项卡
?
簡單選項卡
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#div1 {width: 350px;margin: 0 auto;}#div1 button{width: 100px; height: 30px; background-color: gray; font-size: 18px;color: white;}#div1 div{width: 350px; height: 350px; border: 1px solid black; background-color: yellow; display: none}#div1 .active{background-color: orange}</style><script>window.onload = function(){//獲取節點var oDiv = document.getElementById('div1');var aBtns = oDiv.getElementsByTagName('button');var aDivs = oDiv.getElementsByTagName('div');for(var i = 0; i < aBtns.length; i++){//這個循環，給三個按鈕添加onclick點擊事件aBtns[i].index = i; // aBtns[i]看成一個對象，給這個對象添加一個自定義的屬性aBtns[i].onclick = function(){//1、現將所有按鈕的class樣式取消for(var j = 0; j < aBtns.length; j++){aBtns[j].className = "";aDivs[j].style.display = 'none';}//2、this當前點擊的按鈕。this.className = 'active';aDivs[this.index].style.display = 'block'; }}}</script></head><body><div id = 'div1'><button class = 'active'>吳彥祖</button><!-- index = 0 --><button>彭于晏</button><!-- index = 1 --><button>古天樂</button><!-- index = 2 --><div style = 'display: block'>吳彥祖（Daniel Wu），1974年9月30日出生于美國舊金山，祖籍上海，華語影視男演員、導演，畢業于美國俄勒岡大學。1998年出演了個人首部電影作品《美少年之戀》，從而踏入演藝圈；同年，憑借文藝片《玻璃之城》提名第18屆香港電影金像獎最佳新演員。2001年，主演文藝片《游園驚夢》。2003年，憑借動作片《旺角黑夜》提名第24屆香港電影金像獎最佳男主角；同年，首次擔任電影監制并主演了驚悚片《妖夜回廊》。2004年，因出演動作片《新警察故事》中關祖一角受到廣泛關注，并憑借該角色獲得第 ... </div><div>彭于晏，1982年3月24日出生于臺灣澎湖，中國臺灣影視男演員、歌手。2002年，彭于晏出演了首部電視劇《愛情白皮書》 而踏入演藝圈。2005年因出演仙俠劇《仙劍奇俠傳》中唐鈺一角而受到關注。2006年主演劇情片《六號出口》。2007年憑借愛情片《基因決定我愛你》提名第44屆臺灣電影金馬獎最佳新演員，并為金馬短片單元制作片頭，完成了個人導演處女作。2009年發行首張個人EP《非愛不可》。2011年彭于晏憑借勵志片《翻滾吧！阿信》提名第48屆臺灣電影金馬獎最佳男主角。2012年起，相繼主 ... </div><div>古天樂，1970年10月21日出生于中國香港，中國香港男演員、歌手。1993年，古天樂簽約TVB進入娛樂圈。1995年，在武俠劇《神雕俠侶》中首次擔任男主角，飾演亦正亦邪的楊過而成名。1999年，憑借刑偵劇《刑事偵緝檔案4》獲得TVB萬千星輝頒獎典禮最喜愛男主角獎 [1] 。2000年，憑借在家族劇《創世紀》中的反派張自力奪得TVB萬千星輝頒獎典禮我最喜愛電視角色獎。2001年，憑借古裝穿越劇《尋秦記》第2次獲得TVB萬千星輝頒獎典禮我最喜愛男主角獎</div></div></body> </html>?
瀏覽器效果：
?
轉載于:https://www.cnblogs.com/taohuaya/p/9589326.html
總結
- 上一篇： 身心俱惫是什么意思
- 下一篇： 解决在html中引入font-aweso