jQuery/CSS -点击完全宽度
我有三个链接，将，onClick，显示一个不同的容器(包含一个图表)。这是用于此的HTML代码：
<div class="col-xs-8">
<a class="select fs-11 uppercase active rentedref-chart" href="#">Rented</a>
<a class="select fs-11 uppercase directref-chart" href="#">Direct</a>
<a class="select fs-11 uppercase main-chart" href="#">Personal</a>
<div id="rentedref-chart" style="width:100%;height:180px;"></div>
<div id="directref-chart" style="width:100%;height:180px;display:none;"></div>
<div id="main-chart" style="width:100%;height:180px;display:none;"></div>
</div>如您所见，只有第一个图表显示在页面加载上。为了让我的用户看到他们喜欢的图表，他们可以点击锚链接。
我的jQuery代码是：
$('.rentedref-chart').click(function (){
$(this).addClass("active");
$('.directref-chart').removeClass("active");
$('.main-chart').removeClass("active");
$('#directref-chart').hide();
$('#main-chart').hide();
$('#rentedref-chart').show();
});
$('.directref-chart').click(function (){
$(this).addClass("active");
$('.rentedref-chart').removeClass("active");
$('.main-chart').removeClass("active");
$('#rentedref-chart').hide();
$('#main-chart').hide();
$('#directref-chart').show();
});
$('.main-chart').click(function (){
$(this).addClass("active");
$('.directref-chart').removeClass("active");
$('.rentedref-chart').removeClass("active");
$('#directref-chart').hide();
$('#rentedref-chart').hide();
$('#main-chart').show();
});现在，集装箱之间的切换工作正常。我的问题是，#rentedref-chart，#directref-chart和#main-chart都有width:100%;
当用户切换到隐藏的容器/图表时，就会出现问题。它将使图表100%的页面宽度，而不是容器宽度。
我怎么做，所以宽度是100%的容器？(就像第一个#rented-chart在页面加载一样？)
编辑-显示更多代码：
这是HTML结构：
<body>
<div class="wrap">
<div class="col-xs-2">other content</div>
<div class="col-xs-10 no-padding">
<div class="col-xs-8">
<a class="select fs-11 uppercase active rentedref-chart" href="#">Rented</a>
<a class="select fs-11 uppercase directref-chart" href="#">Direct</a>
<a class="select fs-11 uppercase main-chart" href="#">Personal</a>
<div id="rentedref-chart" style="width:100%;height:180px;"></div>
<div id="directref-chart" style="width:100%;height:180px;display:none;"></div>
<div id="main-chart" style="width:100%;height:180px;display:none;"></div>
</div>
<div class="col-xs-2">other content</div>
</div>
</body>回答 4
Stack Overflow用户
发布于 2015-02-23 11:19:59
从图表中删除display:none，并将它们隐藏在文档中准备就绪。这允许以正确的大小呈现图表，然后隐藏。
HTML
<div id="rentedref-chart" style="width:100%;height:180px;"></div>
<div id="directref-chart" style="width:100%;height:180px;"></div>
<div id="main-chart" style="width:100%;height:180px;"></div> JavaScript
$(function () {
$('#directref-chart').hide();
$('#main-chart').hide();
});或者，如果这是一个选项，不要呈现您的图表，直到它是第一次被选中。使用jQuery .one()来实现这一点。
$('.directref-chart').one("click", function() {
//Render chart code.
});Stack Overflow用户
发布于 2015-02-23 11:24:10
你不需要在那里使用display:none
Html
<div id="directref-chart" style="width:100%;height:180px;"></div>
<div id="main-chart" style="width:100%;height:180px;"></div> Jquery
$(document).ready(function(){
$('#directref-chart').hide();
$('#main-chart').hide();
});Stack Overflow用户
发布于 2015-02-23 11:58:48
对每个具有position:absolute的元素执行width:100%
如果在整个position:relative的父级中没有position:relative(带有指定的width )，并且您的.col-xs-8与position:absolute和width:100%的屏幕宽度相匹配，这将有效。
CSS：
body{ padding:0; margin:0 }
.col-xs-8{
position:static;
height:200px
}
#rentedref-chart, #directref-chart, #main-chart{
position:absolute;
left:0;
top:auto;
bottom:auto;
}您应该将.cols-xs-8的height设置为.cols-xs-8元素下面的内容。
我以前更新过小提琴。http://jsfiddle.net/6gg5o9gm/6/
https://stackoverflow.com/questions/28672424
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号