關於使用Bootstrap Inactive標籤獲取面板的問題

您可以請看看this Demo並讓我知道在JavaScript/jQuery中是否有方法將Bootstrap Panel的寬度設置爲非活動標籤？關於使用Bootstrap Inactive標籤獲取面板的問題

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

來源

2015-09-21 Suffii

其返回-30對我來說 –

@DestinationDesigns，謝謝，但如何獲得的實際尺寸是多少？ – Suffii

你想要'panel-body'的'width'還是整個'tab'？ – DavidDomain

它會出現，你可以得到的寬度加時賽被點擊的標籤當面板：

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

來源

2015-09-21 23:24:37

感謝目的地設計，但它是一個liitile遲了一點，因爲我必須在面板上加載 – Suffii

yea實際上很好奇這一點，所以我' m看着http://getbootstrap.com/javascript/#tabs-events，看看如何最好地觸發這個 –

只需使用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');

來源

2015-09-21 23:39:12 DavidDomain

謝謝大衛，但我需要這樣做加載沒有任何點擊事件，我怎麼能這樣做呢？ – Suffii

進行了編輯。只需在事件監聽器下添加最後一行即可。 – DavidDomain

選項卡窗格設置爲顯示：無;並在活動時顯示：塊。所以......從技術上講，你的非活動窗格不是在加載DOM的權利？因此，您需要以某種方式更改窗格的可見性，方法是單擊或單擊document.ready以獲取寬度，然後將可見性更改回來 –

關於使用Bootstrap Inactive標籤獲取面板的問題

回答

相關問題