谁开发过此类的常用工具，网上有现有代码或控件吗？ 谢谢了

解决方案 »

  1.   

    到网上搜"滑动门代码",很多的,大多基于div+css+js实现,asp.net ajax toolkit里有个tab控件与这个类似
      

  2.   

    index.html<HTML>
    <HEAD>
    <META>
    <TITLE></TITLE>
    <LINK href="Common.css" type="text/css" rel="Stylesheet">
    </HEAD>
    <BODY>
    <form>
    <table class="plPanelSelect" id="oContent" height="40%" cellSpacing="0" cellPadding="0" width="98%" border="0"  ImagesSrc="images/sheet.gif" PanelCaption="Ϣ" align="center"> 
    <tr>  
    <td width="100%" align="center" valign="top"> vvvvvvvvv</td> 
    </tr>
    </table>
    <table class="plPanelUnSelect" id="oContent" height="40%" cellSpacing="0" cellPadding="0" width="98%" border="0"  ImagesSrc="images/sheet.gif" PanelCaption="ϸϢ" align="center"> 
    <tr>  
    <td width="100%" align="center" valign="top">hhhhhhhhhhh </td> 
    </tr>
    </table>
    <table class="plPanelUnSelect" id="oContent" height="40%" cellSpacing="0" cellPadding="0" width="98%" border="0"  ImagesSrc="images/sheet.gif" PanelCaption="ϸϢ" align="center"> 
    <tr>  
    <td width="100%" align="center" valign="top">ggggggggggg </td> 
    </tr>
    </table>
    </form>
    </BODY>
    </HTML>
    Common.css.plTitleSelect{
    border-right: #999999 1px solid;
    border-top: #999999 1px solid;
    font-size: 12px;
    border-left: #999999 1px solid;
    cursor: hand;
    border-bottom: #999999 0px solid;
    background-color: #ffffff;
    text-align: center;
    }
    .plTitleUnSelect{
    border-right: #999999 1px solid;
    border-top: #999999 1px solid;
    font-size: 12px;
    border-left: #999999 1px solid;
    cursor: hand;
    border-bottom: #999999 1px solid;
    background-color: #ececec;
    text-align: center;
    }
    .plTitleSpace{
    font-size: 12px;
    border-bottom: #999999 1px solid;
    text-align: center;
    }
    .plPanelSelect{
    border-right: #999999 1px solid;
    border-top: #999999 0px solid;
    display: block;
    font-size: 12px;
    border-left: #999999 1px solid;
    border-bottom: #999999 1px solid;
    background-color: #ffffff;
    behavior: url(panel.htc);
    }
    .plPanelUnSelect{
    border-right: #999999 1px solid;
    border-top: #999999 0px solid;
    display: none;
    font-size: 12px;
    border-left: #999999 1px solid;
    border-bottom: #999999 1px solid;
    background-color: #ffffff;
    behavior: url(panel.htc);
    }
    panel.htc<PUBLIC:PROPERTY NAME="ImagesSrc" /><PUBLIC:PROPERTY NAME="PanelCaption" /><PUBLIC:ATTACH   EVENT="ondocumentready"  HANDLER="DoInit"       /><PUBLIC:ATTACH   EVENT="onclick"  HANDLER="load" /><SCRIPT LANGUAGE="jscript">window.Panel=new Array();function DoInit(){ if (!element.document.getElementById("oPanelHeader")){  inithtml='<table height="31" cellSpacing="0" id="oPanelHeader" cellPadding="0" width="98%" border="0" align="center" >'+    '<tr>'+    ' <td class="plTitleSpace" width="1%" height="31">&nbsp;</td>'+    ' <td class="plTitleSelect" width="15%" height="31" isTitle="true">'+    '  <table style="FONT-SIZE: 12px" height="25">'+    '   <tr>'+    '    <td><IMG height="18" src="'+ImagesSrc+'" width="18"></td>'+    '    <td vAlign="bottom">'+PanelCaption+'</td>'+    '   </tr>'+    '  </table>'+    ' </td>'+    ' <td class="plTitleSpace" width="*%" height="31">&nbsp;</td>'+    '</tr>'+    '</table>';  element.insertAdjacentHTML("beforeBegin",inithtml);  oPanelHeader.attachEvent("onclick",oPanelHeaderClick); } else{  var rows=oPanelHeader.rows[0];  var cell=rows.insertCell(rows.cells.length-1);  cell.className="plTitleSpace";   cell.width="1%";   cell.innerHTML="&nbsp;";   var cell=rows.insertCell(rows.cells.length-1);  cell.className="plTitleUnSelect";   cell.isTitle="true";  cell.width="15%";    cell.innerHTML= '<table style="FONT-SIZE: 12px" height="25">'+      ' <tr>'+      '  <td><IMG height="18" src="'+ImagesSrc+'" width="18"></td>'+      '  <td vAlign="bottom">'+PanelCaption+'</td>'+      ' </tr>'+      '</table>';         } window.Panel[window.Panel.length]=element;}function oPanelHeaderClick(){  var e = GetObj(window.event.srcElement);  if (e)     if (e.className=="plTitleUnSelect"){        for(i=0;i<window.Panel.length;i++){            window.Panel[i].className="plPanelUnSelect";            oPanelHeader.rows[0].cells[i*2+1].className="plTitleUnSelect";        }               window.Panel[(e.cellIndex+1)/2-1].className="plPanelSelect";        e.className="plTitleSelect";     }}function GetObj(src){    if (src.parentElement.tagName!="BODY"){         if (src.isTitle=="true") return src;         return GetObj(src.parentElement)    }   return null;} </script>
    少个图片;images/sheet.gif
      

  3.   

    ajax 里面有个Tab控件，但你也可以用iframe实现，单击不同的按钮时，链接到不通的页面
      

  4.   

    推荐jqueryui的tabs，引入js脚本就好了
      

  5.   

    http://www.firebird.cn/yhome/yhome.html
    像这个