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

2024-12-05 09:09:55

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

div+css+js模拟tab切换效果事件绑定 IE,firefox兼容

div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒．111．．这里是内容撒．111．．这里是内容撒．111．．这里是内容撒222．．这里是内容撒．222．．这里是内容撒．222．．这里是内容撒．333．．这里是内容撒．333．．这里是内容撒．333．．这里是内容撒．444．．这里是内容撒．44
JS使用面向对象技术实现的tab选项卡效果示例

本文实例讲述了JS使用面向对象技术实现的tab选项卡效果.分享给大家供大家参考,具体如下: 运行效果图如下: 代码如下: html: <ul class="scrollUl"> <li id="m01" class="sd01" value="0"><a href="#" rel="external nofollow" rel="external
javascript仿126邮箱TAB切换效果

简洁Tab 新闻1 新闻2 新闻3 新闻4 新闻列表1 新闻列表2 新闻列表3 新闻列表4 新闻1 新闻2 新闻3 新闻4 新闻列表1 新闻列表2 新闻列表3 新闻列表4 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
基于jquery的tab切换 js原理

html代码: 复制代码代码如下: <div class="details"> <ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3
一个js的tab切换效果代码[代码分离]

支持自动播放可定义鼠标事件延迟不限制html结构假设HTML如下: 复制代码代码如下: <ul> <li id="t1">tab1</li> <li id="t2">tab2</li> <li id="t3">tab3</li> </ul> <div id="c1">content1</div> &l
JS实现仿Windows经典风格的选项卡Tab切换代码

本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码.分享给大家供大家参考,具体如下: 这款仿Windows风格的选项卡,带有灰色的立体感,示例内容是用JS控制输出,只是为了演示功能,你在用的时候完全可以去掉的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-windows-style-tab-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】

本文实例讲述了JS实现图文并茂的tab选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h
JS实现的tab切换选项卡效果示例

本文实例讲述了JS实现的tab切换选项卡效果.分享给大家供大家参考,具体如下: <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid:string 当前被激活菜单的id; 2.otherids:Array() 其它未被激活的id; 3.tabclasses:Array() tab被激活时的样式类+tab未被激活时的样式类,存储两个值即可 */ function
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

本文实例讲述了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果.分享给大家供大家参考.具体如下: 这是一款可在同一页面中多次调用的TAB选项卡代码,仿百度风云榜的TAB切换效果,用到了几张修饰图片,请顺着代码下载所需的图片,然后上传到你的网站中,修改代码内的路径就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PUBL
跨浏览器通用、可重用的选项卡tab切换js代码

由于近来学了点js,于是我装逼道...不太难吧...就切一下display属性?同学无视我..说要搞个通用的...什么还要跟ajax交互..???我愣是没有听懂...到底要搞什么...权当作练手,我自己胡弄了一个. 需求:同学口中的通用我不知道神马意思...那我就按自己的理解吧.. ①跨浏览器,IE6+,FF,Chrome,Safari,Opera ②同一个页面可以用同一个js设置不同的选项卡. 说太多没啥米用,来看代码吧. 一.html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过
JS封装的选项卡TAB切换效果示例

本文实例讲述了JS封装的选项卡TAB切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;}
jQuery插件zepto.js简单实现tab切换

老规矩,先贴代码 <script> $(function(){ window.onload = function() { var $li = $('.taocan-title li'); var $ul = $('.taocan-content .con110'); $li.mouseover(function(){ var $this = $(this); var $t = $this.index(); $li.removeClass(); $this.addClass('active');
基于JavaScript实现Tab选项卡切换效果

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box { width: 500px; height: 400px
JS实现简单的tab切换选项卡效果

本文实例讲述了JS实现简单的tab切换选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <m

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

相关推荐

随机推荐