做一个类似于选项卡的控件解决办法
日期：2014-05-16 浏览次数：20341 次
做一个类似于选项卡的控件
现在要做一个类似于winForm的选项卡控件,是基于web的.但它跟选项卡的区别是,鼠标移到上面的选项卡后,下面的相关内容要改变.
希望各位高手能够提供一个代码示例.
------解决方案--------------------
http://www.codeproject.com/jscript/TabStripNoPostBack.asp
------解决方案--------------------
你加一个onmouseout和onmouseover事件就可以啦
------解决方案--------------------
代码到没有，但思路就是用CSS／javascript控制显示的DIV
------解决方案--------------------
<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>
现在要做一个类似于winForm的选项卡控件,是基于web的.但它跟选项卡的区别是,鼠标移到上面的选项卡后,下面的相关内容要改变.
希望各位高手能够提供一个代码示例.
------解决方案--------------------
http://www.codeproject.com/jscript/TabStripNoPostBack.asp
------解决方案--------------------
你加一个onmouseout和onmouseover事件就可以啦
------解决方案--------------------
代码到没有，但思路就是用CSS／javascript控制显示的DIV
------解决方案--------------------
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
