Question

请你看看this Demo，让我知道JavaScript / jQuery中是否有办法让Bootstrap Panel的宽度达到非活动标签？

<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>

然后返回0

var chartWidth = $(".panel-body").width();
console.info(chartWidth);

Answer 1

单击选项卡时，您可以看到面板的宽度：

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

Answer 2

只需使用shown.bs.tab事件，并将当前标签的visibility设置为hidden。

当你完成了你想做的事情后，把它换回visible。

$('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');

在Bootstrap Inactive选项卡中使用Panel获取问题

2 个答案: