在以前版本的 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 内容只是页面的一部分,不应该单独呈现。有没有一种简单的方法可以更改标记以恢复以前的行为?
谢谢。
最佳答案
我被这个问题困扰了一段时间,后来我找到了答案。
在 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
}
});
关于javascript - 带有远程内容的 jQuery UI 选项卡,链接到选定选项卡的当前页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16942058/