html5选项卡式页面不会向下调整页面
我正在努力学习HTML5。我有一个页面，我想在顶部放置一个表单，然后是一个选项卡式页面。。。。我试着做一个有三个部分的折叠部分 列后跟选项卡。。。。我希望折叠部分能够扩展，以占据所需的空间…我看到的是选项卡页面不会向下移动超过设定的数量 下面是我要做的事情的概要：html5选项卡式页面不会向下调整页面,html,Html,我正在努力学习HTML5。我有一个页面，我想在顶部放置一个表单，然后是一个选项卡式页面。。。。我试着做一个有三个部分的折叠部分 列后跟选项卡。。。。我希望折叠部分能够扩展，以占据所需的空间…我看到的是选项卡页面不会向下移动超过设定的数量 下面是我要做的事情的概要： 塌陷段 col1 col2 col3 xxxxx YYYYY ZZZ xxxxx YYYYY ZZZ /塌陷段 tab1 , tab2, tab3 ..... 下面是一些显示问题的示例代码。。。。我注意到这种情况发生
- 塌陷段
- col1 col2 col3
- xxxxx YYYYY ZZZ
- xxxxx YYYYY ZZZ
- /塌陷段
tab1 , tab2, tab3 .....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--DVID=00014EAC-->
<HTML>
<head>
<title>Tabs in HTML with CSS</title>
<style type="text/css">
<!--
#tabs {
border-bottom: .5em solid #0033CC;
margin: 0;
padding: 0;
}
#tabs li {
display:inline;
border-top: .1em solid #03c;
border-left: .1em solid #03c;
border-right: .1em solid #03c;
}
#tabs li a {
text-decoration: none;
padding: 0.25em 1em;
color: #000;
}
#page1 #tabs li#tab1 a, #page2 #tabs li#tab2 a, #page3 #tabs li#tab3 a, .page4 li#tab4 a {
padding: 0.25em 1em;
background-color: #03c;
color: #fff;
}
-->
.ScanVINTextBoxStyle3 { width: 180px; }
.divTable { width: 35%; height: 10%; display: table; }
.divTableRow { width: 100%; height: 100%; display: table-row;}
.divTableCell { width: 25%; height: 100%; display: table-cell;}
.cols { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol, .ctcol { float:left; }
.rtcol { float:right; }
.layer1
{
margin: 0;
padding: 0;
width: 500px;
}
.heading
{
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content
{
padding: 5px 10px;
background-color:#fafafa;
}
p
{
padding: 5px 0;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function () {
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
</head>
<body id="page2">
<form>
<div class="divTable">
<div class="divTableRow">
<div class="divTableCell"><label>VIN</label> </div>
<div class="divTableCell"> <text></text> </div>
<div class="divTableCell"> <input type="submit" value="Display" /> </div>
</div>
</div>
<div class="layer1">
<p class="heading">Data</p>
<div class="content">
<div class="cols">
<div class="ltcol">
<div class="divTable">
<div class="divTableRow">
<div class="divTableCell"> <label>Voyage</label> </div>
<div class="divTableCell"> <label>xxxx</label> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"> <label>Vessel</label> </div>
<div class="divTableCell"> <label>xxxx</label> </div>
<div class="divTableCell"> <label>yyyy</label> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"> <label>Vessel</label> </div>
<div class="divTableCell"> <label>xxxx</label> </div>
<div class="divTableCell"> <label>yyyy</label> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"> <label>Vessel</label> </div>
<div class="divTableCell"> <label>xxxx</label> </div>
<div class="divTableCell"> <label>yyyy</label> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"> <label>Vessel</label> </div>
<div class="divTableCell"> <label>xxxx</label> </div>
<div class="divTableCell"> <label>yyyy</label> </div>
</div>
</div>
</div>
<div class="ctcol">
center
</div>
<div class="rtcol">
right
</div>
</div>
</div>
</div>
</form>
<ul id="tabs">
<li id="tab1"><a href="ztab1.htm">Tab 1</a></li>
<li id="tab2"><a href="ztab2.htm">Tab 2</a></li>
<li id="tab3"><a href="ztab3.htm">Tab 3</a></li>
<li id="tab4"><a href="ztab4.htm">Tab 4</a></li>
</ul>
<p>The only difference in the HTML code between this page and the other three tabbed pages is that this page has an id on the body tag that names it "page2".</p>
<p><a href="/od/layout/a/aa042307.htm">Return to the Tabbed Navigation Article</a> </p>
</body>
</html>
使用CSS的HTML选项卡
.ScanVINTextBoxStyle3{宽度：180px；}
.divTable{宽度：35%；高度：10%；显示：table；}
.divTableRow{宽度：100%；高度：100%；显示：表格行；}
.divTableCell{宽度：25%；高度：100%；显示：表格单元格；}
.cols{宽度：1020px；}
.ltcol、.ctcol、.rtcol{宽度：300px；边距：0 10px；填充：10px；}
.ltcol、.ctcol{float:left；}
.rtcol{float:right；}
.第1层
{
保证金：0；
填充：0；
宽度：500px；
}
标题
{
保证金：1px；
颜色：#fff；
填充：3x10px；
光标：指针；
位置：相对位置；
背景色：#c30；
}
.内容
{
填充物：5px10px；
背景色：#fafafa；
}
P
{
填充：5px0；
}
jQuery（文档）.ready（函数（）{
jQuery（“.content”）.hide（）；
//使用类msg_body切换组件网
jQuery（“.heading”）。单击（函数（）{
jQuery（this）.next（“.content”）.slideToggle（500）；
});
});
VIN
数据
航行
xxxx
容器
xxxx
yyyy
容器
xxxx
yyyy
容器
xxxx
yyyy
容器
xxxx
yyyy
居中
正确的
该页面与其他三个选项卡式页面之间HTML代码的唯一区别在于，该页面的body标记上有一个id，将其命名为“page2”
这是滑动切换
的问题，您不能滑动切换
高度为自动
。它只是不在它的功能范围之内
因此，你必须像找到的那样使用变通方法
我用第一种方法解决了你的问题
更新的jQuery
jQuery(document).ready(function () {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function () {
$(this).next(".content").animate({
height: '300px' // some arbitrary height approaching target height
}, { duration: 700 /* longer than the next animation */, queue: false });
jQuery(this).next(".content").slideToggle({
duration: 500,
queue: false,
complete: function () {
var divAheight = $('.content').height();
// stop the animation and begin another with the correct target height
$(this).stop().animate({ height: divAheight }, "slow");
}
});
});
});
谢谢…我对原因很困惑…这很有效…非常感谢！