手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript的tab切换原理与效果实现方法
javascript的tab切换原理与效果实现方法
摘要:本文实例讲述了javascript的tab切换原理与效果实现方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:#contain...

本文实例讲述了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程序设计有所帮助。

【javascript的tab切换原理与效果实现方法】相关文章:

javascript搜索框效果实现方法

JavaScript中的bold()方法使用详解

javascript先序遍历DOM树的方法

javascript实现查找数组中最大值方法汇总

javascript实现图片跟随鼠标移动效果的方法

javascript实现模拟时钟的方法

JavaScript实现点击文字切换登录窗口的方法

javascript操作ul中li的方法

JavaScript中的blink()方法的使用

浅谈利用JavaScript进行的DDoS攻击原理与防御

精品推荐
分类导航