请问，像网易那样的栏目分栏按钮如何制作

您好，请教一下，象网易那种，手机、数码等标题的栏目，点击一下，在同一区域显示内容，是如何制作的,非常感谢

解决方案 »

  1.   

    无非就是控制 div 滴 display 属性 block or none，数据可以是预先写好滴，也可以是 ajax 后台读取。
      

  2.   

    所有数据都取出的情况：不同内容放不同DIV，点对应连接修改DIV的DISPLAY属性
    点链接后再取数据的情况：不同链接传递不同参数，调用AJAX取得内容，修改显示层的INNERHTML
      

  3.   

    这个得用到div+css,还得用javascript来变换
      

  4.   

    给你推荐两个网站，去里面学吧。
    www.w3pop.com
    www.w3school.com.cn
      

  5.   

    <!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>简洁Tab</title>
    <style type="text/css">
    <!--
    body,div,ul,li{
     margin:0 auto;
     padding:0;
    }
    body{
     font:12px "宋体";
     text-align:center;
    }
    a:link{
     color:#00F;
     text-decoration:none;
    }
    a:visited {
     color: #00F;
     text-decoration:none;
    }
    a:hover {
     color: #c00;
     text-decoration:underline;
    }
    ul{
     list-style:none;
    }
    .main{
     clear:both;
     padding:8px;
     text-align:center;
    }
    /*第三种形式*/
    .menu2box{
     position:relative;
     overflow:hidden;
     height:22px;
     width:400px;
     text-align:left;
     background: #FFFFff;
    }
    #tabs2 {
     height: 200px;
     width: 400px;
     border: 1px solid #cbcbcb;
     background-color: #f2f6fb;
    }
    #tip2{
     position:absolute;
     top:0;
     left:0;
     height:22px;
     line-height:22px;
     z-index:0;
     width:100px;
     background: #f2f6fb;
    }
    #menu2{
     position:absolute;
     top:0;
     left:0;
     z-index:1;
    }
    #menu2 li{
     display:block;
     float: left;
     padding: 4px 0;
     width:100px;
     text-align: center;
     cursor:pointer;
    }
    -->
    </style>
    <script>
    <!--
    /*第三种形式 利用一个背景层定位*/
    var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
    function nowtab(m,n){
     if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
     document.getElementById("tip"+m).style.left=n*100+'px';
     document.getElementById("main2").innerHTML=m3[n];
    }
    //-->
    </script>
    </head>
    <body>
    <br />
    <br /><!--第三种形式-->
    <div id="tabs2">
     <div class="menu2box">
      <div id="tip2"></div>
      <ul id="menu2">
       <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
       <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
       <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
       <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
      </ul>
     </div>
      <div class="main" id="main2">
    新闻内容
     </div>
    </div>
    <br />
    <br />
    </body>
    </html>