将页面加载到div中，并选择特定的jQuery UI选项卡 [英] Load page into a div with a specific jQuery UI tab selected

问题描述

我有一个带有一些全局导航的页面，该页面使用jQuery将其他页面加载到内容div中.我正在加载到div中的页面上有jQuery UI选项卡.我知道如何将页面加载到div中，但是我要执行的操作是加载具有选定/打开的特定选项卡面板的页面.这是我的基本页面的html:

I've got a page with some global navigation that loads other pages into a content div using jQuery. The pages I'm loading into the div have jQuery UI tabs on them. I know how to load the pages into the div, but what I want to do is load the pages with a specific tab panel selected/open. Here's the html for my base page:

<nav>
<a href="tabs.htm#tab-1">Link to Tab 1</a>
<a href="tabs.htm#tab-2">Link to Tab 2</a>
<a href="tabs.htm#tab-3">Link to Tab 3</a>
</nav>
<main></main> 

以及tabs.htm页面的html:

And the html for the tabs.htm page:

<div class="tabs nav-tabs">
<ul>
  <li><a href="#tab-1">Tab 1</a></li>
  <li><a href="#tab-2">Tab 2</a></li>
  <li><a href="#tab-3">Tab 3</a></li>
</ul>
<div id="tab-1">Blah</div>
<div id="tab-2">Blah</div>
<div id="tab-3">Blah</div>
</div>

还有我的剧本:

$('nav a').click(function(e){
e.preventDefault();
$('main').load(this.href, function() {
});

这可能吗?

推荐答案

在当前设置下，您可以使用活动选项:

With your current setup, you can do the following using the active option of tabs widget:

$('nav a').click(function(e){
   e.preventDefault();
   var tabIndex = parseInt(--this.href.split('#tab-')[1],10);
   $('main').load(this.href, function() {
        $(this).find('.tabs').tabs({
            active: tabIndex
        })
   });
});

这篇关于将页面加载到div中，并选择特定的jQuery UI选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！