做一个类似于选项卡的控件

http://www.codeproject.com/jscript/TabStripNoPostBack.asp

解决方案 »

  1.   

    jerrie_1() 你好!你给的那个控件是需要用户单击的.我希望的是,鼠标直接移动到选项卡上面,下面的内容就会相应改变.
      

  2.   

    你加一个onmouseout和onmouseover事件就可以啦
      

  3.   

    代码到没有，但思路就是用CSS／javascript控制显示的DIV
      

  4.   

    <html>
    <head>
    <title>Tab Demo</title>
    <style type="text/css">
    #tabHead,#tabMain { clear:both;margin:0px;padding:0px;height:10px;}
    .tabName { width:100px;text-align:center;font-weight:bold;color:#333;width:100px;float:left;padding:4px;border:1px solid #333;border-bottom:0px;cursor:hand;}
    .tabContent { width:400px;height:100px;border:1px solid #333;margin:0px;padding:4px;display:none;}
    </style><script language="javascript">
    <!--function initTab(id)
    {
    for(i=1;i<=3;i++)
    {
    if(i==id)
    document.getElementById("div"+i).style.display="block";
    else
    document.getElementById("div"+i).style.display="none";
    }
    }
    -->
    </script>
    </head><body onload="initTab(1)">
    <div id="tabHead">
    <div id="head1" class="tabName" onmouseover="initTab(1)">标签一</div>
    <div id="head2" class="tabName" onmouseover="initTab(2)">标签二</div>
    <div id="head3" class="tabName" onmouseover="initTab(3)">标签三</div>
    </div>
    <div id="tabMain">
    <div id="div1" class="tabContent">
    这是第一个标签的内容
    </div>
    <div id="div2" class="tabContent">
    这是第二个标签的内容这是第二个标签的内容
    </div>
    <div id="div3" class="tabContent">
    这是第三个标签的内容这是第三个标签的内容这是第三个标签的内容
    </div>
    </div>
    </body>
    </html>