簡體   English   中英

默認情況下,在頁面加載時選擇最后一個標簽,即jQuery Ui標簽

[英]Select last tab by default on Page load, jQuery Ui Tabs

我正在嘗試在DOM就緒的jQuery Tabs中打開最后一個選項卡,但是我在網上找到的解決方案似乎無法正常工作。 我正在按照jQuery UI演示站點中的示例使用垂直選項卡。

JS-

$( "#personnelStats_tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#personnelStats_tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

CSS-

.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em; }

使用.last()獲取最后一個元素:

$(".ui-tabs-nav li").last()

我在jQueryUI選項卡上有一個博客/教程可能會有所幫助。

http://spyk3lc.blogspot.com/2012/08/jqueryjqueryui-help-tabs-get-currently.html

另外,嘗試:

// for last tab
$(".ui-tabs-nav li:last")
// with your code as shown
$("#personnelStats_tabs .ui-tabs-nav li:last")

// for last panel
$(".ui-tabs-panel:last")
// with your code as shown
$("#personnelStats_tabs .ui-tabs-panel:last")

哎呀,剛意識到新的jquery有變化,我必須更新我的博客! 他們為什么要更改班級名稱!

有關更多信息,請參見jQuery:last Selector

如果需要,也可以使用jQuery的.last()函數代替:last選擇器。

謝謝大家的幫助。 不幸的是,我對我的問題不夠具體(過於匆忙地寫了這個問題),這里沒有給出解決方案。 但是,我以某種方式錯過了2009年類似帖子的鏈接,並且使用.last()幫助我找到了解決方案:

$(document).ready(function() {
    //Initiate jQuery Tabs
    var $tabs = $( "#personnelStats_tabs" ).tabs();
    //Get the index of the last tab
    var last = $(".ui-tabs-nav li").last().index();
    //Add hack for vertical tabs
    $tabs.addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#personnelStats_tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
    //Select the last tab
    $tabs.tabs("select", last);
});

謝謝大家! 對你們所有人+1

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM