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%; }을 제거하면이 코드는 잘 작동 :이 작업을 수행하기 위해, 나는 다음과 같은 만들었습니다. 그 스타일 정의가있을 때 나는 탭 사이를 뒤집을 수 없습니다. 그러나, 내가 알고있는 바에 따르면, 각 탭이 남아있는 부동산 금액을 채울 수 있도록 그 스타일 정의가 필요합니다. 아무도 내가 이것을 고칠 수있는 방법을 알고 있습니까?
감사합니다.