javascript的tab切换原理与效果实现方法
本文实例讲述了javascript的tab切换原理与效果实现方法。分享给大家供大家参考。
具体实现方法如下:
<html> <head> <styletype="text/css"> #container{border:solid1pxgreen;width:300px;height:300px;} li{float:left;margin-left:20px;} p{float:left;} #sports,#military,#bbs{display:none;} </style> <scripttype="text/javascript"> functiontab(pid){ varps=['news','sports','military','bbs']; for(vari=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> <divid="container"> <ul> <lionmouseover="tab('news');">新闻</li> <lionmouseover="tab('sports');">体育</li> <lionmouseover="tab('military');">军事</li> <lionmouseover="tab('bbs');">论坛</li> </ul> <pid="news">新闻新闻新闻新闻新闻</p> <pid="sports">体育体育体育体育体育</p> <pid="military">军事军事军事军事军事</p> <pid="bbs">论坛论坛论坛论坛论坛</p> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。