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

Posted

技术标签:

【中文标题】将页面加载到 div 中并选择特定的 jQuery UI 选项卡【英文标题】:Load page into a div with a specific jQuery UI tab selected 【发布时间】:2016-01-27 10:06:24 【问题描述】:

我有一个带有一些全局导航的页面,它使用 jQuery 将其他页面加载到内容 div 中。我加载到 div 中的页面上有 jQuery UI 选项卡。我知道如何将页面加载到 div 中,但我想要做的是加载页面并选择/打开特定的选项卡面板。这是我的基本页面的 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() 
);

这可能吗?

【问题讨论】:

【参考方案1】:

使用您当前的设置,您可以使用标签小部件的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
        )
   );
);

演示@plnkr

【讨论】:

太棒了。这正是我一直在寻找的。谢谢!【参考方案2】:

您可以使用方法 .show() 和 CSS 选择器。这是我获得第一个选项卡的方式(记住它们是元素,您可以使用它们的 id 类或其他):

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

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

所以你可以把这段代码放在 $ajax 的成功函数上。

【讨论】:

但是如何通过 href 传递呢? 你不需要,只需将 tab-id 传递给 jquery 方法。假设你要激活#tab-1: $('#tab-1').tab('show');【参考方案3】:
<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'); 可能是您需要使用其他构造,例如 &lt;a href="link.html" data-target="#tab-1"&gt;&lt;/a&gt;

【讨论】:

以上是关于将页面加载到 div 中并选择特定的 jQuery UI 选项卡的主要内容,如果未能解决你的问题,请参考以下文章

用jquery怎么获取页面的特定内容

使用 jQuery 将 HTML 页面动态加载到 div 中

用jquery怎么获取页面的特定内容

Jquery多次加载到div中

jquery mobile - 将内容加载到div中

jQuery怎么加载一个html页面到我指定的div里面