javascript的tab切换原理与效果实现方法

前端技术 2023/09/07 JavaScript

本文实例讲述了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>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/19564

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案