Javascript 在引导非活动选项卡中获取面板时出现的问题

您能看一下并告诉我JavaScript/jQuery中是否有办法在非活动选项卡中获取引导面板的宽度吗

<div class="container">
<!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Chart</a></li>

  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Check The Chart Tab</div>
    <div role="tabpanel" class="tab-pane" id="profile"><div class="row"><div class="col-md-6"><div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div></div><div class="col-md-6"><div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
      </div>
    </div>
   </div>
   </div>
  </div>
  </div>

---

单击选项卡时，您似乎可以获得面板的宽度：

$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () {
    var chartWidth = $(".panel-body").width();
    console.info(chartWidth);
})

---

只需使用

Showed.bs.tab

事件，并将当前选项卡的

可见性设置为
隐藏

当你完成了你想做的事情后，把它放回
可见的位置

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var crntTab = $($(e.target).attr('href')),
      panelBody = crntTab.find('.panel-body'),
      panelBodyWidth = 0;
  // Check if you have a panel-body.
  if(panelBody.length > 0) {
    crntTab.css("visibility", "hidden");
    panelBodyWidth = panelBody.innerWidth();
    // Do what you have to do.
    panelBody.each(function(i,v) {
      $(v).text("Foo loves Bar.");
    });
    // When you are done.
    crntTab.css("visibility", "visible");
  }
})

如果要使此选项卡成为活动选项卡，只需添加

$("a[href='#profile']").tab('show');

它的回报率为-30me@DestinationDesigns，谢谢，但如何获得实际尺寸？您想要
面板主体的
宽度
，还是整个
选项卡
？@DavidDomain，谢谢，我只需要
.panel body
width谢谢Destination Design，但u有点晚了，因为我必须在装载时在面板上创建一些图表。是的，我对此很好奇，所以我想看看如何最好地触发它。谢谢David，但我需要在装载时执行此操作，而不需要任何单击事件，我该怎么办那个案子？做了编辑。只需在事件侦听器下添加最后一行。选项卡窗格设置为显示：无；和显示：激活时阻止。所以…从技术上讲，非活动窗格不在加载时的DOM中，对吗？因此，您需要通过单击或在文档上以某种方式更改窗格的可见性。准备好获取宽度，然后重新更改可见性吗
$("a[href='#profile']").tab('show');