仅有1KB的TAB特效脚本

2024-05-06 15:46:30

字体：大中小

来源：转载

供稿：网友

我很早以前的主题中使用过Dezinerfolio开发的一个手风琴滑动门脚本，仅仅几KB大小，有淡入淡出效果。但是这个脚本有些BUG, 会出现不能截入内容块的情况。

而现在主题侧边栏使用的是一个1KB的JS TAB脚本，按标准代码编辑器算，仅21行代码，也是从网上搜来的，具体来源也无法查证了。最近有不少新手朋友问我如何实现这个效果，特此分享一下。

当然，首先要说的是，这个脚本仅仅实现的就是最简单的TAB切换，没有特效，没有Ajax，没有任何花俏的行为。因为花俏总是要付出代价的，一个视觉效果惊人的特效可能需要体积庞大的脚本来支持，结果就是，你的特效可能会吸引1个访客，但导致的载入速度缓慢却让你失去了10个访客。

所以俺个人一直喜欢用简单实用小巧可爱的脚本。当然，如果你不在乎那些连个几秒都等不上的访客，或是你的主机够好你能够解决速度问题，那本站曾经介绍过很多强大漂亮的JS TAB特效脚本能为你效劳.

把上面的代码复制粘贴保存为”tabber.js”.

注意桔色部份，这是一个For循环，i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 4 为止，这里的4就是TAB数。

2. 在网页文件中调用这个脚本

你可以在<head>部分添加下面的代码，也可以在要使用TAB选项卡的前面添加。
<script type="text/javaScript" src="<?php bloginfo("template_url") ?>/tabber.js "></script>
蓝色部份是tabber.js的地址，我这里是以WordPress主题来做解说，你使用的时候可以使用绝对URL地址或按你的网站结构使用相对URL地址。

1. 进入正题，首先来看这个脚本的代码, 就把它命名为”tabber.js”好了:

function GetObj(objName){if(document.getElementById){return eval('document.getElementById("' + objName + '")');}else if(document.layers){return eval("document.layers['" + objName +"']");}else{return eval('document.all.' + objName);}}function PARMenu(index,flag){for(var i=0;i<4;i++){/* max-4 */if(GetObj("content"+i)&&GetObj("PARm"+i)){GetObj("content"+i).style.display = 'none';GetObj("PARm"+i).className = "out";}}if(GetObj("content"+index)&&GetObj("PARm"+index)){GetObj("content"+index).style.display = 'block';GetObj("PARm"+index).className = "on";}}

把上面的代码复制粘贴保存为”tabber.js”.
注意桔色部份，这是一个For循环，i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 4 为止，这里的4就是TAB数。

2. 在网页文件中调用这个脚本

你可以在<head>部分添加下面的代码，也可以在要使用TAB选项卡的前面添加。

<script type="text/javaScript" src="<?php bloginfo("template_url") ?>/tabber.js "></script>

蓝色部份是tabber.js的地址，我这里是以WordPress主题来做解说，你使用的时候可以使用绝对URL地址或按你的网站结构使用相对URL地址。

3. HTML代码

以下为引用的内容：

<div class="tabmenu">
<ul>
<li class="on" id="PARm0" onclick="PARMenu(0);">热门文章</li>
<li class="out" id="PARm1" onclick="PARMenu(1);">最新文章</li>
<li class="out" id="PARm2" onclick="PARMenu(2);">最新留言</li>
<li class="out" id="PARm3" onclick="PARMenu(3);">随机文章</li>
</ul>
</div><!--end tabmenu-->

<div class="tabbox">

<div id="content0" class="content0">
热门文章的内容
</div>
<div id="content1" style="display: none;" class="content1">
热门文章的内容
</div>
<div id="content2" style="display: none;" class="content1">
最新文章的内容
</div>
最新留言的内容
<div id="content3" style="display: none;" class="content1">
随机文章的内容
</div>
</div><!--end tabbox-->

1. DIV层tabmenu中的onclick事件是点击时进行TAB切换，你也可以用其它事件进行替换，比如onMouseOver则是悬浮替换.

2. tabbox中的几个内容块，你可以留意到，第一个没有添加style=”display:none”这句样式化代码，也就是说，第一个是默认显示的，如果你想哪个内容块默认显示，则去除这句样式化代码，当然，只能同时让其中一个内容块没有这句代码。

差不多就这些了，希望对新手朋友有用。哦，对了，要让TABMENU里面的标题并排显示，当然还需要一些CSS定义，这里就不细说了，自己研究一下。

上一篇：10个优秀的Ajax及Javascript实例资源站

下一篇：不侵占父窗口的超强退弹代码