(200分相送)请问:CSS高手，怎么制做类似于cn.yahoo.com中的TAB页
日期：2014-05-18 浏览次数：20512 次
(200分相送)请教:CSS高手，如何制做类似于cn.yahoo.com中的TAB页
在CN.YAHOO.COM首页中，有好多类似于TAB页风格的CSS+DIV设计。请教哪位高手有这样的源码的。谢谢！
２００分相送，本人承诺，绝不对“无满意答案结贴".
------解决方案--------------------
其实这个不难,分几个DIV层,然后用onmouseover方法调用ajax方法,
清空其他的div层的数据,显示的div用innerhtml出来
------解决方案--------------------
YUI Yahoo提供 Lib 而精美,就需要CSS及美工了...
------解决方案--------------------
<script language="javascript">
var selectImg;
var imgList = new Array();
var lightImgList = new Array();
var navigatorUrlList = new Array();
imgList[1] = "images/popMenu1_off.gif";
imgList[2] = "images/popMenu2_off.gif";
lightImgList[1] = "images/popMenu1_on.gif";
lightImgList[2] = "images/popMenu2_on.gif";
navigatorUrlList[1] = "about2.aspx";
navigatorUrlList[2] = "about1.aspx";
function mouseClick(clickIndex)
{
clearSelect();
selectImg = clickIndex;
if(clickIndex==1)
{
tr1.style.display="";
tr2.style.display="none";
}
else
{
tr1.style.display="none";
tr2.style.display="";
}
eval("document.all('Image" + clickIndex + "').src=lightImgList[" + clickIndex + "];");
}
function mouseIn(inIndex)
{
eval("document.all('Image" + inIndex + "').src=lightImgList[" + inIndex + "];");
mouseClick(inIndex)
}
function mouseOut(outIndex)
{
if(selectImg != outIndex)
eval("document.all('Image" + outIndex + "').src=imgList[" + outIndex + "];");
}
function clearSelect()
{
for(i = 1; i < imgList.length; i ++)
eval("document.all('Image" + i + "').src=imgList[" + i + "];");
}
</script>
<body bgColor="#e6eedf" onload="mouseClick(2);">
<div align="center">
<form runat="server">
<TABLE cellSpacing="0" cellPadding="0" width="348" border="0">
<TR vAlign="top">
<TD class="line_h20" vAlign="top" width="379">
<TABLE height="300" cellSpacing="0" cellPadding="0" width="450" border="0">
<TR>
<TD align="center" height="22">
<TABLE cellSpacing="0" cellPadding="0" border="0">
<TR>
<TD vAlign="bottom" width="25%"><A href="#" onclick="mouseClick(1)" onMouseOut="mouseOut(1)" onMouseOver="mouseIn(1)"><IMG id="Image1" src="images/popMenu1_off.gif" border="0"></A></TD>
<TD vAlign="bottom" width="25%"><A href="#" onclick="mouseClick(2)" onMouseOut="mouseOut(2)" onMouseOver="mouseIn(2)"><IMG id="Image2" src="images/popMenu2_on.gif" border="0"></A></TD>
<TD clospan="2" width="50%"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR id="tr2">
<TD vAlign="top" align="center" height="310"><IFRAME id="main" name="main" src=
在CN.YAHOO.COM首页中，有好多类似于TAB页风格的CSS+DIV设计。请教哪位高手有这样的源码的。谢谢！
２００分相送，本人承诺，绝不对“无满意答案结贴".
------解决方案--------------------
其实这个不难,分几个DIV层,然后用onmouseover方法调用ajax方法,
清空其他的div层的数据,显示的div用innerhtml出来
------解决方案--------------------
YUI Yahoo提供 Lib 而精美,就需要CSS及美工了...
------解决方案--------------------
<script language="javascript">
var selectImg;
var imgList = new Array();
var lightImgList = new Array();
var navigatorUrlList = new Array();
imgList[1] = "images/popMenu1_off.gif";
imgList[2] = "images/popMenu2_off.gif";
lightImgList[1] = "images/popMenu1_on.gif";
lightImgList[2] = "images/popMenu2_on.gif";
navigatorUrlList[1] = "about2.aspx";
navigatorUrlList[2] = "about1.aspx";
function mouseClick(clickIndex)
{
clearSelect();
selectImg = clickIndex;
if(clickIndex==1)
{
tr1.style.display="";
tr2.style.display="none";
}
else
{
tr1.style.display="none";
tr2.style.display="";
}
eval("document.all('Image" + clickIndex + "').src=lightImgList[" + clickIndex + "];");
}
function mouseIn(inIndex)
{
eval("document.all('Image" + inIndex + "').src=lightImgList[" + inIndex + "];");
mouseClick(inIndex)
}
function mouseOut(outIndex)
{
if(selectImg != outIndex)
eval("document.all('Image" + outIndex + "').src=imgList[" + outIndex + "];");
}
function clearSelect()
{
for(i = 1; i < imgList.length; i ++)
eval("document.all('Image" + i + "').src=imgList[" + i + "];");
}
</script>
<body bgColor="#e6eedf" onload="mouseClick(2);">
<div align="center">
<form runat="server">
<TABLE cellSpacing="0" cellPadding="0" width="348" border="0">
<TR vAlign="top">
<TD class="line_h20" vAlign="top" width="379">
<TABLE height="300" cellSpacing="0" cellPadding="0" width="450" border="0">
<TR>
<TD align="center" height="22">
<TABLE cellSpacing="0" cellPadding="0" border="0">
<TR>
<TD vAlign="bottom" width="25%"><A href="#" onclick="mouseClick(1)" onMouseOut="mouseOut(1)" onMouseOver="mouseIn(1)"><IMG id="Image1" src="images/popMenu1_off.gif" border="0"></A></TD>
<TD vAlign="bottom" width="25%"><A href="#" onclick="mouseClick(2)" onMouseOut="mouseOut(2)" onMouseOver="mouseIn(2)"><IMG id="Image2" src="images/popMenu2_on.gif" border="0"></A></TD>
<TD clospan="2" width="50%"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR id="tr2">
<TD vAlign="top" align="center" height="310"><IFRAME id="main" name="main" src=
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
