当前位置: 代码迷 >> ASP.NET >> (200分相送)请问:CSS高手,怎么制做类似于cn.yahoo.com中的TAB页
  详细解决方案

(200分相送)请问:CSS高手,怎么制做类似于cn.yahoo.com中的TAB页

热度:2361   发布时间:2013-02-25 00:00:00.0
(200分相送)请教:CSS高手,如何制做类似于cn.yahoo.com中的TAB页
在CN.YAHOO.COM首页中,有好多类似于TAB页风格的CSS+DIV设计。请教哪位高手有这样的源码的。谢谢!
200分相送,本人承诺,绝不对“无满意答案结贴".

------解决方案--------------------------------------------------------
其实这个不难,分几个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="about1.aspx" frameBorder="0" width="450" scrolling="no"
  相关解决方案