怎样实现新浪网页中分页效果

新浪首页中有个模块：财经，股票，基金。
当鼠标放在“财经”上时，则下面显示的内容是与财经类相关的新闻；
当鼠标放在“股票”上时，则显示“股票”类的新闻；
当鼠标放在“基金”上时，则显示“基金”类的新闻。
但总是在同一页面中显示，请问该如何实现？最好有示例代码参考一下！

解决方案 »

  1.   

    js选项卡,滑动门之类的,ajax实现也行.此类例子太多,LZ自己搜吧
      

  2.   

    对啊，可以用js选项卡的形式，也可以采用ajax的形式，两种都可以
      

  3.   

    dw里面自带有的,就是楼上说的选项卡.
    拖出来就行了.很方便的.然后再把相应的数据检索出来填充到相应的格子里面就OK了.顺便打个广告:
    欢迎加入我们QQ群,大家共同学习.
    QQ群号:2976157
      

  4.   

    可不可以说得明白点？都知道ajax，是用哪个控件来实现的呢？
      

  5.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta content="CSS+JS选项卡，源码来自互联网，修改美化GuoHuiAi"><title>CSS+JS选项卡</title><style type="text/css">/*－－－选项卡CSS开始*//*TAB布局*/#tab * {font-size:12px;}/*这部分删掉了，显示就会不正常，要不整体都不给他设置大小，设置了就不能设em做单位，px和pt都可以。*/#tab {position:relative;}/*Tposition:relative表示相对定位*/    #tab h3 a {display:inline-block;}/*display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。*/    #tab h3 a {display:block;}/*display:block就是将元素显示为块级元素*/    #tab h3,#tab ul,#tab div,#tab li{margin:0;padding:0;list-style-type:none;}/*list-style-type:none表示不显示出列表项标记*/    #tab ul li {position:absolute;left:0;top:0;float:left;display:block;width:77px;height:24px;font-size:0;}    #tab ul li#tab2 {left:80px;}    #tab ul li#tab3 {left:160px;}        #tab ul li div {position:absolute;clear:both;}        #tab ul li div#oDIV2 {left:-80px;}        #tab ul li div#oDIV3 {left:-160px;}/*TAB-标题修饰*/#tab{width:467px; height:87px; overflow:hidden; background-image:url(images/xxk_line.gif); background-repeat:repeat-x; background-position:top;}/*设置总宽度[width]、按钮高度[height]和内容的上边框*/    #tab ul li h3 a {height:24px; text-align:center; color:#949495; background-image:url(images/xxk_pic1.gif); background-repeat:no-repeat;}/* 标题默认状态 */    #tab ul li h3 a:hover { color:#FF6F02; background-image:url(images/xxk_pic2.gif); background-repeat:no-repeat;}/* 鼠标经过状态 */    #tab ul li.up h3 a {color:#FF6F02; background-image:url(images/xxk_pic2.gif); background-repeat:no-repeat;}/* 当前窗口状态 */    #tab ul li div {height:61px; width:465px; border-bottom:1px solid #E7E6E3; border-left:1px solid #E7E6E3; border-right:1px solid #E7E6E3;}/* 设置内容高度[height]、边框[border] *//*－－－选项卡CSS结束*/</style><script type="text/javascript"><!--<!-- 选项卡JS开始 -->function toggleTo(img){    var ts=document.getElementById("tab").getElementsByTagName("div");    for(i=1;i<ts.length+1;i++){        if(img==i)        {            document.getElementById("oDIV"+i).style.display = "";            document.getElementById("oDIV"+i).parentNode.className+=" up";//up前面的空格不能删掉哦！        }        else{            document.getElementById("oDIV"+i).style.display = "none";            document.getElementById("oDIV"+i).parentNode.className="tab"+i;        }    }}<!-- 选项卡JS结束 -->--></script></head><body><!-- 选项卡开始 --><div id="tab">    <ul>        <!-- tab1开始 -->        <li id="tab1" class="up">            <h3 onMouseOver="toggleTo(1)">订餐搜索</h3>            <!-- 选项卡内容1开始 -->            <div id="oDIV1">oDIV1</div>            <!-- 选项卡内容1结束 -->        </li>        <!-- tab1结束 -->        <!-- tab2开始 -->        <li id="tab2">            <h3 onMouseOver="toggleTo(2)">订餐送餐</h3>            <div id="oDIV2" style="display:none;">oDIV2</div>        </li>        <!-- tab2结束 -->    </ul></div><!-- 选项卡结束 --></body></html>