关于jquery tabs的tab div的高度如何设置? 5
我从jquery的网上下载了一个例子程序,然后发现每一个tab的区域div都是根据区域内内容的多少来变化区域高度的,我就像能不能把tab的div高度设置成100%的浏览器...
我从jquery的网上下载了一个例子程序,然后发现每一个tab的区域div都是根据区域内内容的多少来变化区域高度的,我就像能不能把tab的div高度设置成100%的浏览器的高度,或者屏幕的高度。那个例子程序的截图如图,范围很小。
展开
展开全部
我刚才测试了一下,能够正常使用tab。
但是你应该在css里面加上
#contents_2,#contents_3
之外。
我不清楚你有没有声明DOCTYPE.
顺便说一下啊,jqueryui.com提供tabs.js插件,能够符合你百分之九十九的需求,你可以看一下。
以下是我的测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery1-5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".hover").removeClass("hover");
// switch this tab on
$(this).addClass("hover");
// slide all content up
$(".contents_0").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<style type="text/css">
.menubox_0
.menubox
.menubox ul
.menubox li
.menubox li a
.menubox li a.hover
#contents_2,#contents_3
</style>
</head>
<body>
<div class="menubox_0">
<div class="menubox">
<ul>
<li><a href="#" class="tab hover" title="contents_1">Specifications</a></li>
<li><a href="#" class="tab" title="contents_2">System Requirement </a></li>
<li><a href="#" class="tab" title="contents_3">Images</a></li>
</ul>
</div>
<div id="contents_1" class="contents_0">
<p> 1This DRM Converter is capable of converting audio and video file ... </p>
</div>
<div id="contents_2" class="contents_0">
<p> 2This DRM Converter is capable of converting audio and video file ... </p>
</div>
<div id="contents_3" class="contents_0">
<p> 3This DRM Converter is capable of converting audio and video file ... </p>
</div>
</div>
</body>
</html>
但是你应该在css里面加上
#contents_2,#contents_3
之外。
我不清楚你有没有声明DOCTYPE.
顺便说一下啊,jqueryui.com提供tabs.js插件,能够符合你百分之九十九的需求,你可以看一下。
以下是我的测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery1-5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".hover").removeClass("hover");
// switch this tab on
$(this).addClass("hover");
// slide all content up
$(".contents_0").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<style type="text/css">
.menubox_0
.menubox
.menubox ul
.menubox li
.menubox li a
.menubox li a.hover
#contents_2,#contents_3
</style>
</head>
<body>
<div class="menubox_0">
<div class="menubox">
<ul>
<li><a href="#" class="tab hover" title="contents_1">Specifications</a></li>
<li><a href="#" class="tab" title="contents_2">System Requirement </a></li>
<li><a href="#" class="tab" title="contents_3">Images</a></li>
</ul>
</div>
<div id="contents_1" class="contents_0">
<p> 1This DRM Converter is capable of converting audio and video file ... </p>
</div>
<div id="contents_2" class="contents_0">
<p> 2This DRM Converter is capable of converting audio and video file ... </p>
</div>
<div id="contents_3" class="contents_0">
<p> 3This DRM Converter is capable of converting audio and video file ... </p>
</div>
</div>
</body>
</html>
追问
试过,好像不怎么好使,可能我缺少了什么js文件或者css文件吧。
展开全部
tab外围div的高度不设置或不给固定像素就可以自动适应高度了,你想复杂了,这个属于css可以解决的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你可以使用JQuery的height()方法
如果没有明确指定单位(如:em或%),使用px。
$("#p").height(20);
P指的是面板的ID
我是从“上海全鼎软件学院”毕业的————————
如果没有明确指定单位(如:em或%),使用px。
$("#p").height(20);
P指的是面板的ID
我是从“上海全鼎软件学院”毕业的————————
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
高度不能用100%,宽度可以,浏览器高度可以用$(window).height()
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
设置div的style的height属性啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询