将页面加载到 div 并选择了特定的 jQuery UI 选项卡

Question

我有一个带有全局导航的页面，可以使用 jQuery 将其他页面加载到内容 div 中。我加载到 div 的页面上有 jQuery UI 选项卡。我知道如何将页面加载到 div，但我想做的是加载具有特定选项卡面板的页面 selected/open。这是我的基本页面的 html：

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

<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() {
});

这可能吗？

Answer 1

您可以使用方法 .show() 和 CSS 选择器。这是我如何获得第一个选项卡（记住它们是元素，您可以使用它们的 id class 或其他）：

e.g.:
$('#tabId a:first').tab('show');

or:
$('a#tab-item-id').tab('show');

例如，您可以将此代码放在 $ajax 的成功函数上。

Answer 2

<div class="tabs nav-tabs">
<ul>
  <li><a href="link.html#tab-1">Tab 1</a></li>
  <li><a href="link.html#tab-2">Tab 2</a></li>
  <li><a href="link.html#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-tabs a').click(function(e){
  var link = $(this).attr('href');
  var result = link.split('#');
  console.log( result[0] );  // link.html
  console.log( result[1] ); // tab-#
  $('a[href="'+ result[0] +'#' + result[1] + '"]').tab('show');
  $('#'+result[1]).load(result[0],function(){
    // do something
  });
  return false;
});

更新

我不确定这部分 $('a[href="'+ result[0] +'#' + result[1] + '"]').tab('show'); 可能您需要使用其他结构，例如 <a href="link.html" data-target="#tab-1"></a>

Answer 3

根据您当前的设置，您可以使用选项卡小部件的 active 选项执行以下操作：

$('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 选项卡

Load page into a div with a specific jQuery UI tab selected

jquery

jquery-ui

jquery-ui-tabs

jquery-load

演示@plnkr