利用js實(shí)現(xiàn)選項(xiàng)卡的特別效果的實(shí)例
更新時(shí)間：2013年03月03日 16:02:35 投稿：shangke
利用js實(shí)現(xiàn)選項(xiàng)卡的特別效果的實(shí)例，需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;border:0}
#main{width:300px;height:300px;background-color:green}
#head{height:50px;background-color:red}
#head li{float:left;list-style:none;height:50px;width:72px;text-align:center;line-height:50px;background-color:orange;margin-right:3px}
</style>
</head>
<body>
<div id="main">
<div id="head">
<ul>
<li id="tab1" onclick="show(1)" style="background-color:green">新聞</li>
<li id="tab2" onclick="show(2)">體育</li>
<li id="tab3" onclick="show(3)">音樂(lè)</li>
<li id="tab4" onclick="show(4)">娛樂(lè)</li>
</ul>
</div>
</body>
<script>
function show(n){
for(var i=1;i<=4;i++){
//先把所有的選項(xiàng)卡背景顏色設(shè)為橙色，內(nèi)容都隱藏
document.getElementById("tab"+i).style.backgroundColor = 'orange';
document.getElementById("p"+i).style.display = 'none';
}
document.getElementById("tab"+n).style.backgroundColor = 'green';
document.getElementById("p"+n).style.display = "block";
}
</script>
</html>
相關(guān)文章
基于JavaScript實(shí)現(xiàn)添加到購(gòu)物車效果附源碼下載
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)添加到購(gòu)物車效果附源碼下載的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
Bootstrap項(xiàng)目實(shí)戰(zhàn)之首頁(yè)內(nèi)容介紹（全）
本文分為兩部分介紹Bootstrap首頁(yè)內(nèi)容介紹的實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript實(shí)現(xiàn)信用卡校驗(yàn)方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)信用卡校驗(yàn)方法,涉及javascript使用Luhn算法進(jìn)行校驗(yàn)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了Javascript如何遞歸遍歷本地文件夾，文中代碼非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)JavaScript遞歸，感興趣的朋友可以了解下2020-08-08
做web開(kāi)發(fā)的朋友都清楚，js程序的調(diào)試是相當(dāng)郁悶的，因?yàn)槭紫冗@種語(yǔ)言語(yǔ)法比較靈活，它是一種弱類型的腳本語(yǔ)言，很多錯(cuò)誤是無(wú)法控制的。2010-10-10
js利用Array.splice實(shí)現(xiàn)Array的insert/remove
從一個(gè)數(shù)組中移除一個(gè)或多個(gè)元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。2009-01-01
js動(dòng)態(tài)修改input輸入框的type屬性(實(shí)現(xiàn)方法解析)
本文是對(duì)js動(dòng)態(tài)修改input輸入框的type屬性的實(shí)現(xiàn)方法。進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
微信小程序記住密碼的功能簡(jiǎn)單幾步實(shí)現(xiàn)
軟件中的“記住密碼”選框不知道大家平時(shí)會(huì)不會(huì)勾選，反正對(duì)于一個(gè)重度懶癌患者的我來(lái)說(shuō)就沒(méi)有不勾選的時(shí)候，畢竟隔一段時(shí)間就重新輸入一遍難記又難輸?shù)馁~號(hào)密碼，想想就讓人頭皮發(fā)麻。今天教大家用代碼在微信小程序中實(shí)現(xiàn)這個(gè)簡(jiǎn)單的小功能2023-01-01
這篇文章主要介紹了如何從對(duì)象數(shù)組中篩選符合條件的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-09-09
javascript Onunload與Onbeforeunload使用小結(jié)
Onunload，onbeforeunload都是在刷新或關(guān)閉時(shí)調(diào)用，可以在<script>腳本中通過(guò)window.onunload來(lái)指定或者在<body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行，它還可以阻止onunload的執(zhí)行。2009-12-12