javascript的tab切換原理與效果實現(xiàn)方法
更新時間：2015年01月10日 16:37:28 投稿：shichen2014
這篇文章主要介紹了javascript的tab切換原理與效果實現(xiàn)方法,實例分析了簡單的tab切換實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了javascript的tab切換原理與效果實現(xiàn)方法。分享給大家供大家參考。
具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<html>
<head>
<style type="text/css">
#container{border:solid 1px green;width:300px;height:300px;}
li{float:left;margin-left:20px;}
p{float:left;}
#sports,#military,#bbs{display:none;}
</style>
<script type="text/javascript">
function tab(pid){
var ps = ['news','sports','military','bbs'];
for(var i=0,len=ps.length;i<len;i++){
if(ps[i] == pid){
document.getElementById(ps[i]).style.display = "block";
}else{
document.getElementById(ps[i]).style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="container">
<ul>
<li onmouseover="tab('news');">新聞</li>
<li onmouseover="tab('sports');">體育</li>
<li onmouseover="tab('military');">軍事</li>
<li onmouseover="tab('bbs');">論壇</li>
</ul>
<p id="news">新聞新聞新聞新聞新聞</p>
<p id="sports">體育體育體育體育體育</p>
<p id="military">軍事軍事軍事軍事軍事</p>
<p id="bbs">論壇論壇論壇論壇論壇</p>
</div>
</body>
</html>
<head>
<style type="text/css">
#container{border:solid 1px green;width:300px;height:300px;}
li{float:left;margin-left:20px;}
p{float:left;}
#sports,#military,#bbs{display:none;}
</style>
<script type="text/javascript">
function tab(pid){
var ps = ['news','sports','military','bbs'];
for(var i=0,len=ps.length;i<len;i++){
if(ps[i] == pid){
document.getElementById(ps[i]).style.display = "block";
}else{
document.getElementById(ps[i]).style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="container">
<ul>
<li onmouseover="tab('news');">新聞</li>
<li onmouseover="tab('sports');">體育</li>
<li onmouseover="tab('military');">軍事</li>
<li onmouseover="tab('bbs');">論壇</li>
</ul>
<p id="news">新聞新聞新聞新聞新聞</p>
<p id="sports">體育體育體育體育體育</p>
<p id="military">軍事軍事軍事軍事軍事</p>
<p id="bbs">論壇論壇論壇論壇論壇</p>
</div>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
Javascript將字符串日期格式化為yyyy-mm-dd的方法
日期格式化相信對于大家來說再熟悉不過，最近工作中自己利用Javascript就寫了一個，現(xiàn)在將實現(xiàn)的代碼分享給大家，希望對有需要的朋友們能有所幫助，感興趣的朋友們下面來一起看看吧。2016-10-10
這篇文章主要介紹了JS實現(xiàn)圖片平面旋轉的方法,涉及JavaScript操作頁面元素樣式動態(tài)變換的相關技巧,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細介紹了mescroll.js上拉加載下拉刷新組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家介紹了JavaScript設計模式中的迭代器模式，對JavaScript設計模式感興趣的小伙伴們可以參考一下2016-01-01
淺談JavaScript中面向對象技術的模擬...2006-09-09
這篇文章主要給大家介紹了關于ECharts餅圖顏色設置的4種方式,ECharts餅圖的顏色可以通過多種方式進行設置,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
javascript算法題 求任意一個1-9位不重復的N位數(shù)在該組合中的大小排列序號
從1--9中選取N個數(shù)字，組成不重復的N位數(shù)，從小到大進行編號，當輸入其中任何一個數(shù)M時，能找出該數(shù)字對應的編號2012-07-07
這篇文章主要介紹了移動設備手勢事件庫Touch.js的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
有時我們可能需要在多個環(huán)境下對同一個接口進行測試。比如我們請求的域名,開發(fā)、測試、生產(chǎn)環(huán)境,請求參數(shù)。文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
js實現(xiàn)input密碼框提示信息的方法(附html5實現(xiàn)方法)
這篇文章主要介紹了js實現(xiàn)input密碼框提示信息的方法,涉及JavaScript頁面元素的獲取,屬性判斷及樣式設置等技巧,并附帶html5的相關實現(xiàn)方法,需要的朋友可以參考下2016-01-01