以前看见别人做的频道切换，那速度之快，真是羡慕，别人告诉我，那不是用控件的，那是JS样式控制的。我 不以为然，一直让为是朋友在和我开玩笑。样式方面的知识我少之又少啊。哈哈。今天接触到了才终于相信了朋友的话。
页面梆定数据的代码：
<div id="hezuolist">
<div id="hztab">
<span><a href="#">国际合作</a></span>
<span><a href="#">国内合作</a></span>
<span><a href="#">项目招标</a></span>
</div>
<div id="hzcontent">
<asp:Repeater ID="rpt_guoji" runat="server">
<HeaderTemplate><ul></HeaderTemplate>
<FooterTemplate></ul></FooterTemplate>
<ItemTemplate>
<li><a href="new.aspx?id=<%#Eval("id") %>" title="<%#Eval("title") %>"><%#Gettitle(Eval("title"),24)%></a></li>
</ItemTemplate>
</asp:Repeater>
<asp:Repeater ID="rpt_guolei" runat="server">
<HeaderTemplate><ul></HeaderTemplate>
<FooterTemplate></ul></FooterTemplate>
<ItemTemplate>
<li><a href="new.aspx?id=<%#Eval("id") %>" title="<%#Eval("title") %>"><%#Gettitle(Eval("title"),24)%></a></li>
</ItemTemplate>
</asp:Repeater>
<asp:Repeater ID="rpt_zaobiao" runat="server">
<HeaderTemplate><ul></HeaderTemplate>
<FooterTemplate></ul></FooterTemplate>
<ItemTemplate>
<li><a href="new.aspx?id=<%#Eval("id") %>" title="<%#Eval("title") %>"><%#Gettitle(Eval("title"),24)%></a></li>
</ItemTemplate>
</asp:Repeater>
</div>
设置DIV样式，切换频道。其实就是一个显示与隐藏的道理。.undis {display:none}
<script type="text/javascript">
//<![CDATA[
var Tags=document.getElementById('hztab').getElementsByTagName('span');
var TagsCnt=document.getElementById('hzcontent').getElementsByTagName('ul');
var len=Tags.length;
var flag=0;//当前频道修改此处
for(i=0;i<len;i++){
Tags[i].value = i;
Tags[i].onmouseover=function(){changeNav(this.value)};
TagsCnt[i].className='undis';
}
Tags[flag].className='hzover';
TagsCnt[flag].className='';
function changeNav(v){
Tags[flag].className='';
TagsCnt[flag].className='undis';
flag=v;
Tags[v].className='hzover';
TagsCnt[v].className='';
}
// ]]>
</script>
</div>
最终 实现的效果如下：
