1
我正在一個網站上工作。這個網站將有多個標籤。我想要使用JQuery Cycle插件來相應地使用這些選項卡。每個選項卡應占用可用區域。在試圖做到這一點，我創建了以下內容：DIV內容不會與JQuery Cycle Plugin一起出現
<!DOCTYPE html>
<html style="height: 100%; margin: 0; padding: 0; color: #FFF;">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
#content { height: 100%; overflow: hidden; background: white; }
#header { float: left; width: 100%; background-color:silver; padding:8px 4px;}
#tabItems { height:100%; }
.tabItem { padding:15px; border:1px solid #ccc; background-color:blue; top:0; left:0; }
</style>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery.cycle.all.js"></script>
</head>
<body style="height: 100%; margin: 0; padding: 0; color: #FFF;">
<div id="content">
<div id="header">
<a href="#" onclick="showTab(0);">Tab 1</a> |
<a href="#" onclick="showTab(1);">Tab 2</a> |
</div>
<div id="tabItems">
<div id="tabItem1" class="tabItem">
<h2>Tab Content Number 1</h2>
</div>
<div id="tabItem2" class="tabItem">
<h2>Tab Content Number 2</h2>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#tabItems').cycle({
fx: 'scrollDown',
next: '#next',
prev: '#prev',
timeout: 0
});
});
function showTab(tn) {
$('#tabItems').cycle(tn);
return false;
}
</script>
</body>
</html>
此代碼工作正常，如果我刪除#tabItems { height:100%; }。當那個風格定義出現時，我似乎無法在標籤之間切換。但是，從我所知道的情況來看，我需要這種風格定義來使每個選項卡填充剩餘的不動產。有誰知道我該如何解決這個問題？
謝謝！