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