解决方案 »

  1.   

    <style>
    *{padding:0;margin:0}
    body{font:12px/20px "宋体";}
    .nav li{list-style:none;display:block; border:1px solid #ddd;padding:2px 15px;width:80px; float:left; text-align:center;}
    .nav li.current{border:1px solid #f90;}
    .box{width:224px;height:180px;clear:both;}
    </style>
    <ul id="nav" class="nav">
    <li class="current">笔记本</li>
    <li>台式机</li>
    </ul>
    <div id="box_0" class="box" style="display:block; background:#FCC;"></div>
    <div id="box_1" class="box" style="display:none;background:#CFC;"></div>
    <script type="text/javascript">
    window.onload=function(){
    var navBox = document.getElementById('nav'), nav = navBox.getElementsByTagName('li');
    for(var i=0;i<nav.length;i++){
    (function(){
    var j = i;
    nav[i].onmouseover = function(){
    for(var k=0;k<nav.length;k++){
    nav[k].className = '';
    document.getElementById('box_'+k).style.display = 'none';
    if(k==j){
    nav[k].className = 'current'
    document.getElementById('box_'+k).style.display = 'block'
    }
    }
    }
    })()
    }
    }
    </script>