首页 文章

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

提问于
浏览 次
1

在以前版本的jQuery UI（<= 1.8）中，加载选项卡时，远程选项卡的链接将与本地链接交换 . 这使得可以在选项卡上集中点击（也就是在新浏览器选项卡中打开链接），并且它将选择选项卡深度链接到当前页面 . 这是我想要维护的行为 .

旧标签：

<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内容只是页面的一部分，不应该是't be rendered on it'拥有的 . 有没有一种简单的方法来更改标记以恢复以前的行为？

谢谢 .

javascript jquery ajax jquery-ui tabs

1 回答

  • 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
    }
});
    回复于

相关问题