TAB菜单和内容过多导致切换有迟钝的感觉..谁能优化下代码？.

本帖最后由 yumenbeiju 于 2011-02-04 13:32:47 编辑

解决方案 »

  1.   

    你可以这样
    var lastObject = null;
    function secBoard(elementID,listName,n) {
    if(lastObject)
    {
     lastObject.className = "normal";
    }
    document.getElementById(listName+"_"+n).className = "current";
    lastObject = document.getElementById(listName+"_"+n)
    }大致的意思是采用全局变量记录上次的 current 节点
      

  2.   

    速度确实快了。但是有新问题了，首先是TAB的内容出现2层，其实是TAB菜单没有切换背景颜色的效果了
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <META http-equiv=Content-Type content="text/html; charset=gb2312">
    <title>选项卡secBoard</title>
    <style type="text/css">
    * { margin:0; padding:0; word-break:break-all; }
    a {color:#333;text-decoration:none;}
    a:hover {text-decoration:underline;color: #FF0000;}
    .tab_header {width:980px;overflow:hidden;border-bottom:3px solid #C2130E;}
    .urrent{height: 150px;width: 980px;}
       .tab_header ul {float:left;}
        .tab_header ul li {
    float:left;
    border-left:1px solid #FFF;
    width:50px;
    line-height:22px;
    text-align:center;
    cursor:pointer;
    margin-left: 3px;
    font-size: 14px;
    color: #0033FF;
    list-style-image: none;
    list-style-type: none;
    height: 22px;
    }
        .tab_header .normal { background:#CCC; }
        .tab_header .current{
    background:#C2130E;
    color:#FFF;
    }
       #hotnews_content .normal {
    display:none;
    margin: 0px;
    padding: 0px;
    }
        #hotnews_content .current {
    display:block;
    width: 980px;
    }
        #list_1 ul {
    border-top-width: 5px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #00CCCC;
    border-right-color: #00CCCC;
    border-bottom-color: #00CCCC;
    border-left-color: #00CCCC;
    margin-left: 0px;
    height: 50px;
    width: 980px;
    float: left;
    }
        #list_1 ul li{
    font-size:11pt;
    float: left;
    text-align: center;
    list-style-type: none;
    border: 1px solid #0000FF;
    display: block;
    width: 50px;
    margin-left: 50px;
    }
    .dd1{
    background-color: #006666;
    height: 15px;
    width: 970px;
    }
    .dd2{
    background-color: #CC9900;
    height: 10px;
    width: 930px;
    }
    .dd3{
    background-color: #CC6633;
    height: 10px;
    width: 880px;
    }
    </style>
    <script type="text/javascript">
    function secBoard(elementID,listName,n) {
    var elem = document.getElementById(elementID);
    var elemlist = elem.getElementsByTagName("li");
    for (var i=0; i<elemlist.length; i++) {
    elemlist[i].className = "normal";
    var m = i+1;
    document.getElementById(listName+"_"+m).className = "normal";
    }
    elemlist[n-1].className = "current";
    document.getElementById(listName+"_"+n).className = "current";
    }
    </script>
    </head>
    <body>
    <div id="hotnews">
    <div id="hotnews_caption" class="tab_header">
        <ul><li class="current" onmousemove="secBoard('hotnews_caption','list',1);">a</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',2);">b</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',3);">c</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',4);">d</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',5);">e</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',6);">f</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',7);">g</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',8);">h</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',9);">i</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',10);">j</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',11);">k</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',12);">l</li>
      <li class="normal" onmousemove="secBoard('hotnews_caption','list',13);">m</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',14);">n</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',15);">o</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',16);">p</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',17);">q</li>
          <li class="normal" onmousemove="secBoard('hotnews_caption','list',18);">r</li>
        </ul>
    </div>
      

  4.   

    <div id="hotnews_content">
        <div class="urrent" id="list_1">
      <div class="dd1"><a href="www.ddr111.sdf">fdfgdf</a></div>
      <div class="dd2"><a href="www.ddr111.sdf">4356</a></div>
      <div class="dd3"><a href="www.ddr111.sdf">234</a></div>
      </div>
        <div class="normal" id="list_2">
     <div class="dd3"></div>
        <div class="dd1">自春运启动以来，铁路客流保持稳步上升趋势。自1月21日起，全国铁路连续12天单日客流超过500万人。其中1月29日客流达到578.3万人，创历年节前春运旅客发送量新高。从重点地区看，15天来，北京地区、广州地区、上海地区旅客发送量分别达到479.9万人、838.5万人和568.7万人，同比均实现增长。其中广州地区旅客发送量同比增幅显著，达到15%。
    </div>
        <div class="dd2">自春运启动以来，铁路客流保持稳步上升趋势。自1月21日起，全国铁路连续12天单日客流超过500万人。其中1月29日客流达到578.3万人，创历年节前春运旅客发送量新高。从重点地区看，15天来，北京地区、广州地区、上海地区旅客发送量分别达到479.9万人、838.5万人和568.7万人，同比均实现增长。其中广州地区旅客发送量同比增幅显著，达到15%。
    </div>
        </div>
        <div class="normal" id="list_3">
      <div class="dd1">核心提示：国家预防腐败局表示，去年全国党政干部因公出国（境）团组、人次和经费数与前三年平均数相比分别下降47.1％、43.9％和32.6％。去年预防腐败局推动8省市建立预防腐败机构，将通过媒体曝光一批公款出国旅游典型案件。
    </div>
        <div class="dd3">核心提示：国家预防腐败局表示，去年全国党政干部因公出国（境）团组、人次和经费数与前三年平均数相比分别下降47.1％、43.9％和32.6％。去年预防腐败局推动8省市建立预防腐败机构，将通过媒体曝光一批公款出国旅游典型案件。
    </div>
      <div class="dd2">自春运启动以来，铁路客流保持稳步上升趋势。自1月21日起，全国铁路连续12天单日客流超过500万人。其中1月29日客流达到578.3万人，创历年节前春运旅客发送量新高。从重点地区看，15天来，北京地区、广州地区、上海地区旅客发送量分别达到479.9万人、838.5万人和568.7万人，同比均实现增长。其中广州地区旅客发送量同比增幅显著，达到15%。
    </div>
        </div>
        <div class="normal" id="list_4">
    <div class="dd3">核心提示：国家预防腐败局表示，去年全国党政干部因公出国（境）团组、人次和经费数与前三年平均数相比分别下降47.1％、43.9％和32.6％。去年预防腐败局推动8省市建立预防腐败机构，将通过媒体曝光一批公款出国旅游典型案件。
    </div>
      <div class="dd1">自春运启动以来，铁路客流保持稳步上升趋势。自1月21日起，全国铁路连续12天单日客流超过500万人。其中1月29日客流达到578.3万人，创历年节前春运旅客发送量新高。从重点地区看，15天来，北京地区、广州地区、上海地区旅客发送量分别达到479.9万人、838.5万人和568.7万人，同比均实现增长。其中广州地区旅客发送量同比增幅显著，达到15%。
    </div>
      <div class="dd2">核心提示：国家预防腐败局表示，去年全国党政干部因公出国（境）团组、人次和经费数与前三年平均数相比分别下降47.1％、43.9％和32.6％。去年预防腐败局推动8省市建立预防腐败机构，将通过媒体曝光一批公款出国旅游典型案件。
    </div>
     </div>
        <div class="normal" id="list_5">
      <div class="dd1">自春运启动以来，铁路客流保持稳步上升趋势。自1月21日起，全国铁路连续12天单日客流超过500万人。其中1月29日客流达到578.3万人，创历年节前春运旅客发送量新高。从重点地区看，15天来，北京地区、广州地区、上海地区旅客发送量分别达到479.9万人、838.5万人和568.7万人，同比均实现增长。其中广州地区旅客发送量同比增幅显著，达到15%。
    </div>
      <div class="dd2"></div>
      <div class="dd3">核心提示：国家预防腐败局表示，去年全国党政干部因公出国（境）团组、人次和经费数与前三年平均数相比分别下降47.1％、43.9％和32.6％。去年预防腐败局推动8省市建立预防腐败机构，将通过媒体曝光一批公款出国旅游典型案件。
    </div>
        </div>
        <div class="normal" id="list_6">
      <div class="dd1"></div>
      <div class="dd2"></div>
      <div class="dd3">自春运启动以来，铁路客流保持稳步上升趋势。自1月21日起，全国铁路连续12天单日客流超过500万人。其中1月29日客流达到578.3万人，创历年节前春运旅客发送量新高。从重点地区看，15天来，北京地区、广州地区、上海地区旅客发送量分别达到479.9万人、838.5万人和568.7万人，同比均实现增长。其中广州地区旅客发送量同比增幅显著，达到15%。
    </div>
        </div>
        <div class="normal" id="list_7">
      <div class="dd1">2010年，国家预防腐败局拓展工作领域，探索开展社会领域防治腐败工作。推进政府与行业协会、市场中介组织分开，加强非公有制经济领域防治腐败调研。
    </div>
      <div class="dd2">自春运启动以来，铁路客流保持稳步上升趋势。自1月21日起，全国铁路连续12天单日客流超过500万人。其中1月29日客流达到578.3万人，创历年节前春运旅客发送量新高。从重点地区看，15天来，北京地区、广州地区、上海地区旅客发送量分别达到479.9万人、838.5万人和568.7万人，同比均实现增长。其中广州地区旅客发送量同比增幅显著，达到15%。
    </div>
      <div class="dd3"></div>
        </div>
        <div class="normal" id="list_8">
      <div class="dd1">自春运启动以来，铁路客流保持稳步上升趋势。自1月21日起，全国铁路连续12天单日客流超过500万人。其中1月29日客流达到578.3万人，创历年节前春运旅客发送量新高。从重点地区看，15天来，北京地区、广州地区、上海地区旅客发送量分别达到479.9万人、838.5万人和568.7万人，同比均实现增长。其中广州地区旅客发送量同比增幅显著，达到15%。
    </div>
      <div class="dd2"></div>
      <div class="dd3">核心提示：国家预防腐败局表示，去年全国党政干部因公出国（境）团组、人次和经费数与前三年平均数相比分别下降47.1％、43.9％和32.6％。去年预防腐败局推动8省市建立预防腐败机构，将通过媒体曝光一批公款出国旅游典型案件。
    </div>
        </div>
        <div class="normal" id="list_9">
      <div class="dd1">中新网2月4日电 铁道部网站消息，从铁道部春运办获悉，自1月19日春运启动以来至2月2日，全国铁路节前春运15天里共发送旅客7734.3万人，同比增加672.7万人，增幅达9.5%，创历年春运节前铁路旅客发送量新高。其中发送跨局中长途直通旅客2991.1万人，同比增加240.8万人，增长8.8%。全国铁路日均发送旅客超过500万人，达到515</div>
      <div class="dd2">2010年，国家预防腐败局拓展工作领域，探索开展社会领域防治腐败工作。推进政府与行业协会、市场中介组织分开，加强非公有制经济领域防治腐败调研。
    </div>
      <div class="dd3">自春运启动以来，铁路客流保持稳步上升趋势。自1月21日起，全国铁路连续12天单日客流超过500万人。其中1月29日客流达到578.3万人，创历年节前春运旅客发送量新高。从重点地区看，15天来，北京地区、广州地区、上海地区旅客发送量分别达到479.9万人、838.5万人和568.7万人，同比均实现增长。其中广州地区旅客发送量同比增幅显著，达到15%。
    </div>
        </div>
            <div class="normal" id="list_10">
      <div class="dd1">自春运启动以来，铁路客流保持稳步上升趋势。自1月21日起，全国铁路连续12天单日客流超过500万人。其中1月29日客流达到578.3万人，创历年节前春运旅客发送量新高。从重点地区看，15天来，北京地区、广州地区、上海地区旅客发送量分别达到479.9万人、838.5万人和568.7万人，同比均实现增长。其中广州地区旅客发送量同比增幅显著，达到15%。
    </div>
      <div class="dd2">中新网2月4日电 铁道部网站消息，从铁道部春运办获悉，自1月19日春运启动以来至2月2日，全国铁路节前春运15天里共发送旅客7734.3万人，同比增加672.7万人，增幅达9.5%，创历年春运节前铁路旅客发送量新高。其中发送跨局中长途直通旅客2991.1万人，同比增加240.8万人，增长8.8%。全国铁路日均发送旅客超过500万人，达到515</div>
      <div class="dd3"></div>
        </div>
            <div class="normal" id="list_11">
      <div class="dd1">核心提示：国家预防腐败局表示，去年全国党政干部因公出国（境）团组、人次和经费数与前三年平均数相比分别下降47.1％、43.9％和32.6％。去年预防腐败局推动8省市建立预防腐败机构，将通过媒体曝光一批公款出国旅游典型案件。
    </div>
      <div class="dd2">2010年国家预防腐败局推动福建、四川等8省（市）成立省级预防腐败机构。指导21个省（区、市）、2个中央国家机关和2个中央企业开展预防腐败试点工作。配合有关部门推动对配偶、子女均已移居</div>
      <div class="dd3">中新网2月4日电 铁道部网站消息，从铁道部春运办获悉，自1月19日春运启动以来至2月2日，全国铁路节前春运15天里共发送旅客7734.3万人，同比增加672.7万人，增幅达9.5%，创历年春运节前铁路旅客发送量新高。其中发送跨局中长途直通旅客2991.1万人，同比增加240.8万人，增长8.8%。全国铁路日均发送旅客超过500万人，达到515</div>
        </div>
            <div class="normal" id="list_12">
      <div class="dd1">中新网2月4日电 铁道部网站消息，从铁道部春运办获悉，自1月19日春运启动以来至2月2日，全国铁路节前春运15天里共发送旅客7734.3万人，同比增加672.7万人，增幅达9.5%，创历年春运节前铁路旅客发送量新高。其中发送跨局中长途直通旅客2991.1万人，同比增加240.8万人，增长8.8%。全国铁路日均发送旅客超过500万人，达到515</div>
      <div class="dd2"></div>
      <div class="dd3">2010年国家预防腐败局推动福建、四川等8省（市）成立省级预防腐败机构。指导21个省（区、市）、2个中央国家机关和2个中央企业开展预防腐败试点工作。配合有关部门推动对配偶、子女均已移居</div>
        </div>
     <div class="normal" id="list_13">
      <div class="dd1">中新网2月4日电 铁道部网站消息，从铁道部春运办获悉，自1月19日春运启动以来至2月2日，全国铁路节前春运15天里共发送旅客7734.3万人，同比增加672.7万人，增幅达9.5%，创历年春运节前铁路旅客发送量新高。其中发送跨局中长途直通旅客2991.1万人，同比增加240.8万人，增长8.8%。全国铁路日均发送旅客超过500万人，达到515</div>
        <div class="dd3"></div>
      <div class="dd2"></div>
        </div>
        <div class="normal" id="list_14">
    <div class="dd3">2010年，国家预防腐败局拓展工作领域，探索开展社会领域防治腐败工作。推进政府与行业协会、市场中介组织分开，加强非公有制经济领域防治腐败调研。
    </div>
      <div class="dd1"></div>
      <div class="dd2">中新网2月4日电 铁道部网站消息，从铁道部春运办获悉，自1月19日春运启动以来至2月2日，全国铁路节前春运15天里共发送旅客7734.3万人，同比增加672.7万人，增幅达9.5%，创历年春运节前铁路旅客发送量新高。其中发送跨局中长途直通旅客2991.1万人，同比增加240.8万人，增长8.8%。全国铁路日均发送旅客超过500万人，达到515</div>
     </div>
        <div class="normal" id="list_15">
      <div class="dd1">dfg4fhfrgrhrthurt</div>
      <div class="dd3">中新网2月4日电 铁道部网站消息，从铁道部春运办获悉，自1月19日春运启动以来至2月2日，全国铁路节前春运15天里共发送旅客7734.3万人，同比增加672.7万人，增幅达9.5%，创历年春运节前铁路旅客发送量新高。其中发送跨局中长途直通旅客2991.1万人，同比增加240.8万人，增长8.8%。全国铁路日均发送旅客超过500万人，达到515</div>
       <div class="dd2">2010年，国家预防腐败局拓展工作领域，探索开展社会领域防治腐败工作。推进政府与行业协会、市场中介组织分开，加强非公有制经济领域防治腐败调研。
    </div>
        </div>
        <div class="normal" id="list_16">
      <div class="dd2"></div>
        <div class="dd1">2010年国家预防腐败局推动福建、四川等8省（市）成立省级预防腐败机构。指导21个省（区、市）、2个中央国家机关和2个中央企业开展预防腐败试点工作。配合有关部门推动对配偶、子女均已移居</div>
      <div class="dd3"></div>
        </div>
        <div class="normal" id="list_17">
      <div class="dd3">2010年，国家预防腐败局拓展工作领域，探索开展社会领域防治腐败工作。推进政府与行业协会、市场中介组织分开，加强非公有制经济领域防治腐败调研。
    </div>
      <div class="dd1">2010年国家预防腐败局推动福建、四川等8省（市）成立省级预防腐败机构。指导21个省（区、市）、2个中央国家机关和2个中央企业开展预防腐败试点工作。配合有关部门推动对配偶、子女均已移居</div>
      <div class="dd2"></div>
        </div>
        <div class="normal" id="list_18">
      <div class="dd2">2010年，国家预防腐败局拓展工作领域，探索开展社会领域防治腐败工作。推进政府与行业协会、市场中介组织分开，加强非公有制经济领域防治腐败调研。
    </div>
      <div class="dd1"></div>
      <div class="dd3">2010年国家预防腐败局推动福建、四川等8省（市）成立省级预防腐败机构。指导21个省（区、市）、2个中央国家机关和2个中央企业开展预防腐败试点工作。配合有关部门推动对配偶、子女均已移居</div>
        </div>
    </div>
    </div>
    </body>
    </html>
      

  5.   

    就是上面没有图片和链接的情况下切换菜单CPU使用率100%了，FF浏览器很低的占用率,就是IE占用过高如果有
    图片和链接切换就非常缓慢了
      

  6.   

    onmousemove是鼠标移动事件，会反复触发改用 onmouseover  事件就好了