javascript的tab切換原理與效果實現方法

2024-05-06 16:14:09

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript的tab切換原理與效果實現方法,實例分析了簡單的tab切換實現技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了javascript的tab切換原理與效果實現方法。分享給大家供大家參考。

具體實現方法如下：

復制代碼代碼如下:

		<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>