预实现效果:(点击不同的tab显示不同面板内容)

一:用到的js函数:

复制代码 代码如下:

<script language="javascript" type="text/javascript" >

//变换tab函数

//原则,外层div里含有内层多个div

function tabPanelEx(trThis,urlImgNormal,urlImgPoint,tabs,tabid){

var tds=trThis.parentNode.children;

for(var i=0;i<tds.length;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.length;j++)

{

vtabs[j].style.display="none";

}

document.getElementById(tabid).style.display="block";

}

</script>

二:页面调用代码;

代码

复制代码 代码如下:

<table width="768" border="0" cellspacing="0" cellpadding="0">

<>

<tr valign="bottom">

<td height="37" background="../images/a_06.jpg">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="16" height="32" valign="bottom"></td>

<td ex="true" width="94" height="32" align="right" valign="middle" background="../images/an_01.jpg"

onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab1')">

<div>全员教育 </div></td>

<td width="7" height="32"></td>

<td ex="true" width="94" height="32" align="right" valign="middle" background="../images/an_02.jpg"

onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab2')" >

<div>医界动态 </div></td>

</tr>

</table>

</td>

</tr>

<>

<tr>

<td height="5" align="center"></td>

</tr>

<>

<tr>

<td align="center">

<div id="newTabs">

<div id="newsTab1">

<table width="768" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="384" height="240" align="left" valign="top"><p>全员教育</p>

</td>

<td width="1" height="240" background="../images/a_07.jpg"></td>

<td width="384" height="240" align="right" valign="top">全员教育</td>

</tr>

</table>

</div>

<div id="newsTab2">

<table width="768" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="384" height="240" align="left" valign="top">医界动态</td>

<td width="1" height="240" background="../images/a_07.jpg"></td>

<td width="384" height="240" align="right" valign="top">医界动态</td>

</tr>

</table>

</div>

</div>

</td>

</tr>

</table>

调用解释:

(1)使用的为table,table结构为:

代码

复制代码 代码如下:

<table width="768" border="0" cellspacing="0" cellpadding="0">

<>

<tr valign="bottom">

<td 第一行菜单 tab>

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td 调用onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab1')" 显示newTabs内的newsTab1>

<div>全员教育 </div></td>

<td 调用onClick="tabPanelEx(this,'../images/an_02.jpg','../images/an_01.jpg','newTabs','newsTab2')" 显示newTabs内的newsTab2>

<div>医界动态 </div></td>

</table>

</td>

</tr>

<>

<tr>

<td height="5" align="center"></td>

</tr>

<>

<tr>

<td align="center">

<div id="newTabs">

<div id="newsTab1">

全员教育

</div>

<div id="newsTab2">

医界动态

</div>

</div>

</td>

</tr>

</table>

完整文件下载