http://bbs.foosun.net/dispbbs.asp?BoardID=51&ID=45438&replyID=&skin=1
最近有网友反映，本人整理提供的凤凰和网易栏目切换效果太麻烦，想要一个简单点的，容易实现的，所以仿照PP娱乐网的效果http://www.ppyule.com/整理了一下，用简单的代码就可以轻松实现栏目切换效果，而且更加容易自由布局，本例分别提供了调用六个栏目和三个栏目的两种效果。
最前面的两个栏目我用table做的样式测试，完全可以的！
此主题相关图片如下：
下面的就是原来的效果！
此主题相关图片如下：
以下是调用三个栏目的！
此主题相关图片如下：
此主题相关图片如下：
这里特殊说明的是，标签部分可以用表格来实现的，想怎么调用就怎么调用，只要先行做好样式，可以图文混排，可以是新闻列表，可以是导读，你完全不用受本例效果限制，真的可以说是“为所欲为”了。样式的例子我也在样式系列中发了一些参考的，那些完全可以改成你自己要的。
这里做了一个简单的列表样式，就是新闻居左，日期右对齐的那种：
参考样式：<TR><TD width="15" vAlign="middle">·</TD> <TD width="165" vAlign="top" align="left"><A class=hei12 href="{NS:FS_NewsURL}" target=_blank>{NS:FS_NewsTitle}</A></TD> <TD width="65" vAlign="top" align="right">07-01-13 22:48:58</TD> </TR>
你再看看代码和插入标签后的效果是多么的简单：
代码及混合后位置：
<LINK
href="test2/play.css" type=text/css
rel=stylesheet>
<SCRIPT>
var SwapID=0;
var PauseTime=15*1000;
var Timer1;
function swap(Obj)
{
var st = document.getElementsByName('lt2');
var j;
if(st.length>0)
{
for(j=0; j<st.length; j++)
{
if(st[j]==Obj)
{
lt2[j].style.display='';
//mt[j].style.background='url(images/lb1.gif)';#C8D5DD;
//mt[j].style.background='#F2F7FD';
mt[j].style.background='#ADC1DA'
mt[j].style.color='#FFFFFF'
}
else
{
lt2[j].style.display='none';
mt[j].style.background='#FFFFFF';
mt[j].style.color='#333333'
}
}
}
}
function AutoSwap()
{
//StopSwap();Swap(lt[SwapID])
for (i=0;i<3;i++)
Swap(lt[i]);
//SwapID+=1;
//if (SwapID==3) { SwapID=1; }
Timer1=setTimeout("AutoSwap()",PauseTime);
}
function StopSwap()
{
clearTimeout(Timer1);
}
</SCRIPT>
<META content="MSHTML 6.00.3790.2759" name=GENERATOR></HEAD>
<BODY>
<DIV id=all>
<DIV id=ppyule></DIV>
<!--子菜单-->
<!--正文开始,相关内容-->
<DIV id=ppyule>
<DIV id=left_top>
<DIV id=xiangguan>
<DIV
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px"><SPAN
id=mt onmouseover=swap(lt2[0]);
style="BACKGROUND: #adc1da; COLOR: #ffffff">相关内容</SPAN><SPAN id=mt
onmouseover=swap(lt2[1]);>本类更新</SPAN><SPAN id=mt
onmouseover=swap(lt2[2]);>本类排行</SPAN></DIV><!--相关内容-->
<DIV id=lt2>
风讯标签1</DIV><!--最近更新-->
<DIV id=lt2 style="DISPLAY: none">
风讯标签2</DIV><!--本类排行-->
<DIV id=lt2 style="DISPLAY: none">
风讯标签3</DIV></DIV>
</DIV>
</DIV>
</DIV>
<!--end all--></BODY></HTML>
依旧是你可以参考对照的源代码：
点击浏览该文件
