[英]Set height's of element on button click
我在左侧有一个仪表板类型页面,在右侧有选项卡,在右侧有相应选项卡的内容。 我正在使用引导程序,所以我为选项卡及其内容制作了2列1列,但是我的问题是选项卡的边框没有覆盖内容的整个高度,我希望它覆盖整个高度,所以我写了一个jQuery将设置最后一个标签的高度(“ #ws”),但仅在页面加载时有效,而在单击按钮时无效。
TLDR
1)前往http://kwebmakerusa.com/whp/v3/dashboard.html
2)您可以看到选项卡的右边框高度与右侧内容相同吗
3)点击其他任何标签,例如:通讯录。 注意高度缩小
我想做的是保持高度与右边的内容相同
这是我的html:
<div class="col-md-2 col-sm-3 hidden-xs nopadding">
<div id="dtnavs">
<div class="col-md-12 tabtxt active" id="dasht">My Dashboard</div>
<div class="col-md-12 tabtxt" id="cartt">My Cart</div>
<div class="col-md-12 tabtxt" id="addresst">Address Book</div>
<div class="col-md-12 tabtxt" id="ordert">My Orders</div>
<div class="col-md-12 tabtxt" id="wisht">My Wishlist</div>
<div class="col-md-12 tabtxt" id="newst">Newsletters</div>
</div>
<div class="col-md-12 tabtxt" id="ws"></div><!--set height dynamicaly-->
</div>
点击时
$("#addresst,#mtab3").click(function() {
$('#dashboardtab,#carttab,#ordertab,#wishtab,#newslettertab,#video').slideUp(500);
$('#addtab').slideDown(500);
$(".dashnav").find(".active").removeClass("active");
$(this).addClass("active");
setwsheight("#addtab");
$(".ccatname,#bcactive").text("Address Book");
console.log(this);
return false;
});
setwsheight();
function setwsheight(sh){
$('#ws').delay(1000).height($(sh).height()-$('#dtnavs').height());
var str = "$('#ws').height($("+sh+").height()-$('#dtnavs').height())";
console.log(str);
console.log(sh+" height : "+$(sh).height());
console.log("dtnavs height : "+$('#dtnavs').height());
console.log("WS height :" +$('#ws').height());
};
没有jQuery
我已经更改了一些HTML代码,例如
在“内容”标签中删除此类left40
将此CSS应用于您的内容侧父内容,例如col-md-10 col-sm-9 col-xs-12 nopadding
.selector {
border-left: 1px solid #ccc;
margin-left: -1px;
padding: 0 0 0 40px;
}
应用此CSS标签内容col-md-2 col-sm-3 hidden-xs nopadding
.selector{
background: #fff none repeat scroll 0 0;
position: relative;
z-index: 999999;
}
尝试这个。
var newHeight=your calculation;
$('#ws').animate({
height:newHeight+"your unit"
},yourDelay,function(){});
另外,如果仍然#ws
,请尝试在CSS文件#ws
元素的position属性为绝对值,以及在此答案中发布的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.