javascript的tab切换原理与效果实现方法
更新时间：2015年01月10日 16:37:28 投稿：shichen2014
这篇文章主要介绍了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>
<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程序设计有所帮助。
相关文章
![微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb](//img.jbzj.com/images/xgimg/bcimg0.png)
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
这篇文章主要给大家介绍了关于微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb的相关资料，文中通过示例代码介绍的非常详细，需要的朋友参考借鉴，下面随着小编来一起学习学习吧2018-07-07
这篇文章主要为大家介绍了HTTP 302 redirect应用及作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
幻灯片播放图片的效果想必大家都有见到过吧，下面有个不错的示例，感兴趣的朋友可以参考下2013-11-11
这篇文章主要介绍了微信小程序项目总结之记账小程序功能的实现方法（包括后端）,需要的朋友可以参考下2019-08-08
有时候我们想让用户在新窗口打开网站，因为默认当前窗口打开，很多情况下，用户并不喜欢2013-04-04
第二次聊一聊JS require.js模块化工具的基础知识，本文为大家JS require.js模块化工具的最基本知识点，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了有关js对字符串数组进行拼接的性能问题，字符串连接一直是js中性能最低的操作之一，应该如何解决呢？请参看本文的介绍2014-10-10
仿QQ邮箱的弹出层，弹出确认框，主要是用火狐的firebug把html和css扣了下来，没有做封装,就定义了一个拖动事件. 大家可以封装自己的弹出窗，嘿嘿！2015-04-04
这篇文章主要介绍了ES6之Proxy的get方法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
javascript中的undefined和not defined区别示例介绍
这篇文章主要介绍了javascript中的undefined和not defined区别,需要的朋友可以参考下2014-02-02
![微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论