最近有网友反映，本人整理提供的凤凰和网易栏目切换效果太麻烦，想要一个简单点的，容易实现的，所以仿照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
如果您对本文有任何疑问或者建议，请到讨论区发表您的意见:
>>
论坛入口 <<
上一篇：
3.1-自由标签教程 下一篇：
我也放个栏目切换代码，简简单单的。
【文章评论】
【收藏本文】
【推荐好友】
【打印本文】
【我要投稿】 【论坛讨论】
