今天,给好友整理一个游戏类网站,首页的tab选项卡要重新调整下。这个网站用的是phome旗下的帝国CMS管理系统,首页也是默认的模板。目前选择卡共有四个选项,分别为新闻,图片,影视及FLASH。其中影视是要去掉的。
我最初的改动想法是:在首页的模板里,把影视对应的东西都给注释掉。没想到这样的操作后,是把影视相关的东西去掉了,同时其它三项,当鼠标在三个选项上面进行切换时,下面与其对应的区域的东西并没有出现。后来想,是不是当鼠标在三个选项上面进行切换时没有触发etabit(btn) JS方法,所以目录下/skin/default/js/tabs.js上面,这个etabit(btn) 方法加了一句alert(“触发了没?”);结果测试表明,切换时已触发etabit(btn) JS方法。可是即然已经成功触发这个JS,可是为什么对应的东西却不出现呢。
后来,在网上查了下,说在firefoxe上面tabit(btn) JS方法不能正常运行,后来作了兼容性的改动。将tab.js里面改为下列JS代码:
function $xudtitle(str){
document.title = str;
}
//在IE上空白节点不算,在火狐上算.等于在IE上数量为4,在火狐上就为9
function $xu(id){
return document.getElementById(id);
}
//是否元素节点
function $xuisele(id){
var node = $xu(id);
if(node && node.nodeType ==1)
return true;
return false ;
}
//取元素中第一个子元素节点
function $xufelenode(id){
var node = $xu(id);
while(node && node.nodeType !=1)
node = node.nextSibling();
return node ;
}
function $xushow(id){
$xu(id).style.display = “” ;
}
function $xublock(id){
$xu(id).style.display = “block” ;
}
function $xuhide(id){
$xu(id).style.display = “none” ;
}
function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf(“_”);
var e = idname.lastIndexOf(“_”)+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
if ($xuisele(tabName+”_btn_”+i)) {
$xu(tabName+”_btn_”+i).className = “”;
}
};
btn.className = “curr”;
};
function etabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf(“_”);
var e = idname.lastIndexOf(“_”)+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
if ($xuisele(tabName+”_div_”+i)) {
$xuhide(tabName+”_div_”+i);
$xu(tabName+”_btn_”+i).className = “”;
}
};
document.getElementById(tabName+”_div_”+id).style.display = “block”;
btn.className = “curr”;
};
将上面的代码,重新存储为tabs.js,去覆盖/skin/default/js/tabs.js之下的。之后刷新首页,实现了影视选项卡去掉,其它三个依然可用的效果。
在这一过程中,自己也尝试过,将影视相关的东西,都换成FLASH,如下面代码所示:
<td><!– tab选项卡,默认为点击变化,如需改为移动,将onmouseover改为onclick –>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td><ul><li id=”tab1_btn_0″ onmouseover=”etabit(this)”>新闻</li>
<li id=”tab1_btn_1″ onmouseover=”etabit(this)”>图片</li>
<li id=”tab1_btn_2″ onmouseover=”etabit(this)”>FLASH</li>
<li id=”tab1_btn_3″ onmouseover=”etabit(this)”>FLASH</li>
</ul></td>
</tr>
在这一块中:
<li id=”tab1_btn_2″ onmouseover=”etabit(this)”>FLASH</li>
<li id=”tab1_btn_3″ onmouseover=”etabit(this)”>FLASH</li>
只是一个ID的值的不同。