带有远程内容的 jQuery UI 选项卡，链接到当前页面并选择了选项卡答案

【问题标题】：jQuery UI Tabs with remote content, link to current page with tab selected带有远程内容的 jQuery UI 选项卡，链接到当前页面并选择了选项卡
【发布时间】：2013-06-05 14:03:52
【问题描述】：

在以前版本的 jQuery UI (

旧标签：

<div id="tabs">
  <ul>
    <li><a href="some-ajax-content.php" title="section1">Content 1/a></li>
    <li><a href="some-other-ajax-content.php" title="section2">Content 2</a></li>
  </ul>
  <div id="section 1">Loading Content...</div>
  <div id="section 2">Loading Content...</div>
</div>

在调用 $('#tabs').tabs() 之后，会产生这样的结果：

<div id="tabs">
  <ul>
    <li><a href="#section1" title="section1">Content 1/a></li>
    <li><a href="#section2" title="section2">Content 2</a></li>
  </ul>
  <div id="section 1">Loading Content...</div>
  <div id="section 2">Loading Content...</div>
</div>

新标签（UI >=1.9）

<div id="tabs">
  <ul>
    <li aria-controls="section1"><a href="some-ajax-content.php">Content 1/a></li>
    <li aria-controls="section1"><a href="some-other-ajax-content.php">Content 2</a></li>
  </ul>
  <div id="section 1">Loading Content...</div>
  <div id="section 2">Loading Content...</div>
</div>

调用$('#tabs').tabs()后：

<div id="tabs">
  <ul>
    <li aria-controls="section1"><a href="some-ajax-content.php">Content 1/a></li>
    <li aria-controls="section1"><a href="some-other-ajax-content.php">Content 2</a></li>
  </ul>
  <div id="section 1">Loading Content...</div>
  <div id="section 2">Loading Content...</div>
</div>

调用 $('#tabs').tabs() 后，href 属性不会被交换。这意味着如果用户在新选项卡中点击打开链接，将直接加载 ajax 内容。正如我所期望的那样，ajax 内容只是页面的一部分，不应单独呈现。有没有一种简单的方法可以更改标记以恢复以前的行为？

谢谢。

【问题讨论】：

标签： javascript jquery ajax jquery-ui tabs

【解决方案1】：

我在这个问题上卡了一段时间，我想通了。

在 JQuery UI 1.9 之前，它转换为使用“#”来显示 div，并且用于 ajax 加载的 URL 作为数据对象存储在

所以对于 JQuery UI >=1.9，我尝试模仿相同的行为。在 JQuery >=1.9 中，aria-controls 属性用于为每个选项卡选择 div 关联。

以下内容对我有用。

$("#tabs").tabs({
    beforeActivate: function (event, ui) {
        //...do stuff
        var numOfTabs = $('#tabs ul li').size();
        //change href to use # instead of URL directly, stores URL as data object
        for (i=0; i<numOfTabs; i++) {
            $(ui.newTab).parent().find("li a").eq(i).data("href.tabs",$(ui.newTab).parent().find("li a").eq(i).attr('href'));
            $(ui.newTab).parent().find("li a").eq(i).attr('href', '#'+$(ui.newTab).parent().find("li").eq(i).attr('aria-controls'));
        }
        //...do stuff
    },
    activate: function (event, ui) {
        //...do stuff
        var numOfTabs = $('#tabs ul li').size();
        //use URL stored in data object as href
        for (i = 0; i < lenTabs; i++) {
            $(ui.newTab).parent().find("li a").eq(i).attr('href', $(ui.newTab).parent().find('a').eq(i).data("href.tabs"));
        }
        //...do stuff
    }
});

【讨论】：