谁能告诉我这个tab和左边的树形菜单是怎样做的？

new 出个 ActiveXObject( "Microsoft.XMLHTTP" )参考这里
http://baike.baidu.com/view/1806882.htm

晕，他上面的tab菜单太简单了吧，他不就是不同的页面吗？
点击左边的也是不同的页面不知道你仔细看了没又不是无刷新效果

就是嘛，就是每个页面的头部都是包含了那些相同的文件，是包含的，楼主是不是看错了的，都在刷新，还有就是如果你要达到点击左边的菜单，只有中间变化，那肯定是用了iframe这个东西，是一个静态框架

<!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=utf-8" />
<title>CSS制作Tab菜单</title>
<meta name="keywords" content="marslau css tabmenu tab菜单标签菜单下载" />
<meta name="description" content="CSS制作Tab菜单的样式 "/>
<style type="text/css">
    body {
margin:0;
padding:0;
font:12px "宋体";
}
h1{ font: "宋体" ; font-size:16px; font-weight:bold; color: #0099FF;margin:20px; padding:10px 0 0 0;float:left;}
h2 {
font: bold 13px "宋体", Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 9px 0 3px 0;
padding: 0px 0px 0px 15px;
}

/*- Menu Tabs F--------------------------- */    #tabsF {
      float:left;
      width:100%;
      background:#efefef;
      font-size:100%;
      line-height:normal;
  border-bottom:1px solid #666;

      }
    #tabsF ul {
margin:0;
padding:2px 10px 0 50px;
list-style:none;
float:left;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      float:left;
      }
    #tabsF a {
      float:left;
      background:url("images/tableftF.gif") no-repeat left top;
      margin:0;
      /*padding:0 0 0 4px;*/
      text-decoration:none;
      width:150px;
       height:40px;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("images/tabrightF.gif") no-repeat right top;
       /*padding:7px 15px 4px 6px;*/
       padding:1px
      color:#666;
      width:150px;
      height:40px;
      text-align:center;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }

body,td,th {
font-family: 宋体;
font-size: 12px;

}
}
</style>
</head><body onload="showiframe()">
<div id="tabsF">
  <ul id="a" style="position:absolute;left:113px;top:0px">    <li id="1" style="display:block"><a href="menuhtml/left1.htm?menu=1" target="left"  title="基礎數據管理"><span>A</span></a></li>
    <li id="2" style="display:block"><a href="menuhtml/left2.htm?menu=2" target="left" title="培訓資源管理"><span>B</span></a></li>
    <li id="3" style="display:block"><a href="menuhtml/left3.htm?menu=3"  target="left"  title="課程管理"><span>C</span></a></li>
    <li id="4" style="display:block"><a href="menuhtml/left4.htm?menu=4" target="left"   title="申請及批核項目"><span>D</span></a></li>
    <li id="5" style="display:block"><a href="menuhtml/left5.htm" target="left"   title="出席及考核管理"><span>E</span></a></li>
    <li id="6" style="display:none"><a href="menuhtml/left6.htm" target="left"   title="查詢"><span>F</span></a></li>
<li id="7" style="display:none"><a href="menuhtml/left7.htm"  target="left"  title="報表"><span>G</span></a></li>
<li id="8" style="display:none "><a href="menuhtml/left8.htm"  target="left"  title="通知及提示"><span>H</span></a></li>
    <li id="9" style="display:none"><a href="menuhtml/left9.htm" target="left"   title="用戶管理"><span>I</span></a></li>

    <li id="10" style="display:none"><a href="menuhtml/left1.htm?menu=1" target="left"  title=""><span>J</span></a></li>
    <li id="11" style="display:none"><a href="menuhtml/left2.htm?menu=2" target="left" title=""><span>K</span></a></li>
    <li id="12" style="display:none"><a href="menuhtml/left3.htm?menu=3"  target="left"  title=""><span>L</span></a></li>
    <li id="13" style="display:none"><a href="menuhtml/left4.htm?menu=4" target="left"   title=""><span>M</span></a></li>
     <li id="14" style="display:none"><a href="menuhtml/left4.htm?menu=4" target="left"   title=""><span>N</span></a></li>
  </ul>
  <div id="b"  style="position:absolute;left:2px;top:10px">
  <input id="op" onclick="switchSysBar()" type="button" value="隱藏左欄" runat="server">
  <input type="image" src="images/pre.gif" id="pre" width="20px" height="20px" align=absMiddle  onclick="pre()" value="pre">
  <input type="image"  src="images/next.gif" id="next" width="20px" height="20px" align=absMiddle  onclick="nexta()" value="next">  </div>
</div>
<br/><br/></body>
<script type="text/javascript">
function mysubmit()
    {
        parent.left.location = "menuhtml/left1.htm?menu=1";
    }
function nexta()
{
   for (i=1;i<=5;i++)
  {
  document.getElementById(i).style.display="none"
  }
  for (i=6;i<=10;i++)
  {
  document.getElementById(i).style.display="block"
  }

   document.getElementById('pre').style.visibility="visible"
   document.getElementById('next').style.visibility="hidden"
}
function pre()
{
   for (i=1;i<=5;i++)
  {
  document.getElementById(i).style.display="block"
  }
  for (i=6;i<=10;i++)
  {
  document.getElementById(i).style.display="none"
  }

   document.getElementById('pre').style.visibility="hidden"
   document.getElementById('next').style.visibility="visible"
}
</script>
</html>

<!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=utf-8" />
<title>CSS制作Tab菜单</title>
<meta name="keywords" content="marslau css tabmenu tab菜单标签菜单下载" />
<meta name="description" content="CSS制作Tab菜单的样式 "/>
<style type="text/css">
    body {
margin:0;
padding:0;
font:12px "宋体";
}
h1{ font: "宋体" ; font-size:16px; font-weight:bold; color: #0099FF;margin:20px; padding:10px 0 0 0;float:left;}
h2 {
font: bold 13px "宋体", Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 9px 0 3px 0;
padding: 0px 0px 0px 15px;
}

/*- Menu Tabs F--------------------------- */    #tabsF {
      float:left;
      width:100%;
      background:#efefef;
      font-size:100%;
      line-height:normal;
  border-bottom:1px solid #666;
      }
    #tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("tabrightF.gif") no-repeat right top;
       padding:7px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }

body,td,th {
font-family: 宋体;
font-size: 12px;
}
</style>
</head><body>
<div id="tabsF">
  <ul>
    <li><a href="#" title="链接 1"><span>链接 1</span></a></li>
    <li><a href="#" title="链接 2"><span>链接 2</span></a></li>
    <li><a href="#" title="链接 3"><span>链接 3</span></a></li>
    <li><a href="#" title="长文字链接"><span>长文字链接</span></a></li>
    <li><a href="#" title="链接 5"><span>链接 5</span></a></li>
    <li><a href="#" title="链接 6"><span>链接 6</span></a></li>
<li><a href="#" title="链接 7"><span>链接 7</span></a></li>
  </ul>
</div>
<br /><br /></body>
</html>

瞎掰这是AJAX吗？只是服务器速度快点！没看见URL都不一样啊汗

调试易

谁能告诉我这个tab和左边的树形菜单是怎样做的？

解决方案 »