问题是每个标签都有不同的高度。我能找到的最简单的解决方案是检查选择输入选项卡ID的时间,然后强制css高度到它后面的div。这很好地解决了这个问题。这是我正在使用的代码:
<script type='text/javascript'>
window.onload = function () {
document.getElementById('tab1').onclick=function() {
$("#internalcontainer").css("height","2600px");
}
document.getElementById('tab2').onclick=function() {
$("#internalcontainer").css("height","1000px");
}
document.getElementById('tab3').onclick=function() {
$("#internalcontainer").css("height","1200px");
}
document.getElementById('tab4').onclick=function() {
$("#internalcontainer").css("height","1200px");
}
document.getElementById('tab5').onclick=function() {
$("#internalcontainer").css("height","600px");
}
document.getElementById('tab6').onclick=function() {
$("#internalcontainer").css("height","2400px");
}
document.getElementById('tab7').onclick=function() {
$("#internalcontainer").css("height","800px");
}
}
</script>
不幸的是,这不会触发第一个输入标签,因为当页面加载时用户没有选择标签 - 第一个标签在页面加载时显示为默认值。
如果没有选择标签输入,我将如何创建后备,还原为tab1 ID?类似的东西:
if tab1 selected = do this
if tab2 selected = do that
else = tab1 rule is selected
答案 0 :(得分:0)
没有看到你的HTML,我认为你可以这么类似
$function () {
$('.tab').on("click",function() { // any tab, use class="tab"
$("#internalcontainer").height($(this).parent().find(".someDiv").height());
}).eq(0).click(); // trigger the first onload or look at the URL
});
答案 1 :(得分:-1)
在页面加载时,选中选项卡并设置高度。在此之后继续附加您的事件监听器。
window.onload = function () {
//set the height as default on page load.
$("#internalcontainer").css("height","2600px");
//add the selected class to tab1
$('#tab1').addClass('selected');
//Attach rest of the event listener as you wanted.
document.getElementById('tab1').onclick=function() {
................
}