当前频道修改之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