我正在网站上工作。该网站将有多个标签。我想使用JQuery Cycle插件来相应地添加选项卡。每个选项卡都应占用可用区域。为了做到这一点,我创建了以下内容:
<!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%; }
,此代码可以正常工作。当那个样式定义存在时,我似乎无法在标签之间切换。但是,据我所知,我需要使用该样式定义来使每个标签填充剩余的房地产量。有谁知道我怎么解决这个问题?
谢谢!
答案 0 :(得分:0)
我正在检查这个 - 代码确实工作正常(至少在FF / IE中)标签循环,与我的代码的唯一区别是我使用了来自https://github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js的最新循环JS
是否有特定的浏览器无法看到这个?