Question

我有三个链接，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>

Answer 1

从图表中删除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.
});

Answer 2

您无需使用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();
});

Answer 3

对于position:absolute

的每个元素，请width:100%

如果整个position:relative的父级中没有width（具有指定的.col-xs-8），而.col-xs-8位于position:absolute且{{1}，则此方法有效将适合屏幕宽度。

CSS：

width:100%

您应该设置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; }的{{1}}，直到显示.cols-xs-8元素下的内容。

之前我更新了我的小提琴。 http://jsfiddle.net/6gg5o9gm/6/

Answer 4

有很多方法可以做到...... 我建议创建一个类“asideanddntdisplay”

<style>
.asideanddntdisplay
 {position : fixed; left : -5000px;}
</style>

在创建图表之前：

 $("#directref-chart, #main-chart").show().addClass("asideanddntdisplay");

创建图表后：

$("#directref-chart, #main-chart").hide().removeClass("asideanddntdisplay");

我相信这对你有用。

jQuery / CSS - 点击全宽

4 个答案: