一起来讨论讨论，给给建议

在做网页时，想要实现winform程序的tabControl1的那种效果。怎么做好点呢？我自己有两个思路一个是用js一个是页面中用面板，后台控制隐藏显示。。 我想请教大家，有没有那种第三方控件实现这种效果的呢，拽到页面直接用，跟C/S架构的一样。。或者说还有没有其它方式实现呢 ？

解决方案 »

  1.   

    可以用 js + iframe 实现，也可以用jQuery UI 里的tab插件来实现。
      

  2.   

    extjs 中的tabpanel
    http://www.extjs.com/deploy/dev/examples/tabs/tabs.html
      

  3.   

    multioview
    jquery
    http://www.scriptlover.com/controls/SimpleTab/
      

  4.   

    一般都用js和css控制
    http://www.51kids.com/Trade/
      

  5.   

    <html>
    <head>
    <title>又一款CSS鼠标滑动门特效丨芯晴网页特效丨CsrCode.Cn</title>
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">
    <style type="text/css">
    <!--
    body {
    margin: 0px;
    }
    #header {
    background-color: #ffffff;
    height: 286px;
    width: 687px;
    margin: 0px;
    padding: 0px;
    border: 1px solid #CCCCCC;
    font-size: 12px;
    }
    #menu {
    margin: 0px;
    padding: 0px;
    list-style:none;
    }
    #menu li {
    list-style:none;
    display: block;
    width: 137px;
    height: 23px;
    text-align: center;
    float: left;
    margin: 0px;
    padding-right: 0px;
    padding-left: 0px;
    line-height: 23px; height: 23px
    }
    .sec1 { background-image: url(http://www.codefans.net/jscss/demoimg/200904/btn_bg.gif);float: left;list-style-type: none; height: 23px;border-right:1px solid #B0BEC7;border-bottom:1px solid #B0BEC7;}
    .sec2 { background: url(http://www.codefans.net/jscss/demoimg/200904/btn_select.gif);position: relative; height: 23px;border-right:1px solid #B0BEC7;border-bottom:1px solid #FFFFFF;color: #FF0000}
    .block { display: block;list-style:none;}
    .unblock { display: none;list-style:none;}
    .pic img {
      padding:  3px;
      border:  1px  solid  #ccc;
    }
    -->
    </style>
    </head>
    <body>
    <script language=javascript>
    function secBoard(n)
    {
    for(i=0;i<menu.childNodes.length;i++)
    menu.childNodes[i].className="sec1";
    menu.childNodes[n].className="sec2";
    for(i=0;i<main.childNodes.length;i++)
    main.childNodes[i].style.display="none";
    main.childNodes[n].style.display="block";
    }
    </script>
    <div id="header">
      <ul id="menu">
        <li onMouseOver="secBoard(0)" class="sec2">CsrCode.Cn</li>
        <li onMouseOver="secBoard(1)" class="sec1">ASP</li>
        <li onMouseOver="secBoard(2)" class="sec1">PHP</li>
        <li onMouseOver="secBoard(3)" class="sec1">EXTJS</li>
        <li onMouseOver="secBoard(4)" class="sec1">JSP</li>
      </ul>
      <ul id="main">
        <li class="block"><p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</p>
    </li>
        <li class="unblock">ASP的内容</li>
        <li class="unblock">PHP的内容</li>
        <li class="unblock">EXTJS的内容</li>
        <li class="unblock">JSP的内容</li>
      </ul>
    </div>
    </body>
    </html>