我有一个标签系统(jQuery),里面有三个不同长度的标签。在这个标签旁边,我有一个带div的列。如果单击选项卡2,列中的div将按高度缩放,单击选项卡1时,div将按比例缩小。
我所拥有的:
$(".multidomain a").click(function() {
$(".main-vervolg.right .left .domain").animate({ height: '317px'}, 400).css('overflow-y','scroll');
});
$(".signledomain a").click(function() {
$(".main-vervolg.right .left .domain").animate({ height: '247px'}, 650).css('overflow-y','scroll');
});
$(".domeinnaam a").click(function() {
$(".main-vervolg.right .left .domain").animate({ height: '924px'}, 650).css('overflow-y','scroll');
});
这在Chrome中运行得很好,但在不同的浏览器中,列div的高度有时比tab系统大。所以我需要一些东西来计算每次的tab系统高度,然后将这个高度添加到column div。
谢谢你的帮助。
最佳答案
$(document).ready(function(){
$(".tabnav li a").click(function(){
var thisNav = $(this);
var thisNavIndex = thisNav.parent().index()+1;
var getTabHeight = $('#tab'+ thisNavIndex).height();
$(".main-vervolg.right .left .domain").animate({ height: getTabHeight+'px'}, 650).css('overflow-y','scroll');
// delete this test//
$('#test').html( ' The tab height is: '+ getTabHeight +' || The button nav index +1 is: '+ thisNavIndex );
});
// PRODUCTEN TABS
$('.tabs > ul').tabs({ fx: { opacity: 'toggle' } });
});
我是怎么做到的:
单击时,我们得到单击元素的父元素
li
.index()+1
(因为它是基于零的)。我们只需要寻找div
a
我们计算他的身高,然后把它变成一个var
#tab(+ that index number)
然后我们就把这个列计算出来!
就这样!
愉快的编码,让我知道结果或如果你遇到一些问题。
编辑您的评论:
$('.tabnav li a').click(function(){
var thisNav = $(this);
var thisNavIndex = thisNav.parent().index()+1;
var getTabHeight = $('div#tab'+ thisNavIndex).height();
var heightRemake = ( $('.top').height()+48 ) + getTabHeight;
if($('#tab'+ thisNavIndex).is(':visible')) {
return false;
}
$(".main-vervolg.right .left .domain").animate({ height: heightRemake+'px'}, 650).css('overflow-y','scroll');
});
关于javascript - jQuery(制表系统)计算高度并将高度添加到div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6572818/