预实现效果:(点击不同的tab显示不同面板内容)
一:用到的js函数:
代码如下:
//变换tab函数
//原则,外层div里含有内层多个div
function tabPanelEx(trThis,urlImgNormal,urlImgPoint,tabs,tabid){
var tds=trThis.parentNode.children;
for(var i=0;i{
if(tds[i].attributes["ex"])
{
tds[i].style.backgroundImage="url("+urlImgNormal+")";
}
}
trThis.style.backgroundImage="url("+urlImgPoint+")";
//div control
var vtabs=document.getElementById(tabs).children;
for(var j=0;j{
vtabs[j].style.display="none";
}
document.getElementById(tabid).style.display="block";
}
二:页面调用代码;
代码
代码如下:
|
onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab1')">
全员教育 |
|
onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab2')" >
医界动态 |
|
|
|
调用解释:
(1)使用的为table,table结构为:
代码
代码如下:
完整文件下载
下载本文
