Javascript 带有远程内容的jQuery UI选项卡，链接到选中选项卡的当前页面

在以前版本的jQuery UI（=1.9）中

正在加载内容。。。
正在加载内容。。。

调用$（'#tabs'）.tabs（）后：

正在加载内容。。。
正在加载内容。。。

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

---

谢谢。

我在这个问题上纠结了一段时间，我终于明白了

在jQueryUI1.9之前，它转换为使用“#”来显示div，用于ajax加载的URL作为数据对象存储在

因此，对于jQueryUI>=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
    }
});

$（“#选项卡”）.tabs({
beforeActivate:功能（事件、用户界面）{
//…做事
var numOfTabs=$（'#tabs ul li'）.size（）；
//将href更改为使用#而不是直接使用URL，将URL存储为数据对象
对于（i=0；i我在这个问题上坚持了一段时间，然后我找到了答案

在jQueryUI1.9之前，它转换为使用“#”来显示div，用于ajax加载的URL作为数据对象存储在

因此，对于jQueryUI>=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
    }
});

$（“#选项卡”）.tabs({
beforeActivate:功能（事件、用户界面）{
//…做事
var numOfTabs=$（'#tabs ul li'）.size（）；
//将href更改为使用#而不是直接使用URL，将URL存储为数据对象
对于（i=0；i
<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>

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