当前频道修改之JS

以前看见别人做的频道切换，那速度之快，真是羡慕，别人告诉我，那不是用控件的，那是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].οnmοuseοver=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>

最终 实现的效果如下：

            

转载于:https://www.cnblogs.com/sunnysmile/archive/2009/04/22/1441486.html