[英]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.