我很早以前的主题中使用过Dezinerfolio开发的一个手风琴滑动门脚本，仅仅几KB大小，有淡入淡出效果。但是这个脚本有些BUG, 会出现不能截入内容块的情况。
而现在主题侧边栏使用的是一个1KB的JS TAB脚本，按标准代码编辑器算，仅21行代码，也是从网上搜来的，具体来源也无法查证了。最近有不少新手朋友问我如何实现这个效果，特此分享一下。
当然，首先要说的是，这个脚本仅仅实现的就是最简单的TAB切换，没有特效，没有ajax，没有任何花俏的行为。因为花俏总是要付出代价的，一个视觉效果惊人的特效可能需要体积庞大的脚本来支持，结果就是，你的特效可能会吸引1个访客，但导致的载入速度缓慢却让你失去了10个访客。
所以俺个人一直喜欢用简单实用小巧可爱的脚本。当然，如果你不在乎那些连个几秒都等不上的访客，或是你的主机够好你能够解决速度问题，那本站曾经介绍过很多强大漂亮的JS TAB特效脚本能为你效劳.
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定义，这里就不细说了，自己研究一下。
没有评论:
发表评论