如何让jQuery UI选项卡直接加载URL /页面？

Question

我有一组选项卡，其中href是我希望在选中选项卡时加载的URL。

继文档之后，我添加了以下选择选项。

$('#example').tabs({ 
select: function(event, ui) { 
var url = $.data(ui.tab, 'load.tabs'); 
if(url) { 
location.href = url; 
return false; 
} 
return true; 
} 
}); 

在每个页面（ASP.NET主页）的顶部上的标签<script>。

页面加载，但从未直观地选择标签，即，即使显示标签＃3的内容，也总是选择第一个标签。

在FireBug中追踪上面的脚本，一旦location.href=url被执行，新页面加载并且返回语句从不执行。这是一个问题吗？

感谢

附加信息 只是想澄清，我不是试图加载通过Ajax选项卡的内容，但需要做回发。结合回发，我希望让点击的标签成为选定的标签。另外，上面的例子来自jQueryUI/Tabs页面上的第3.6节。

Answer 1

在上述追踪在 萤火脚本，一旦放在location.href =网址是 执行新的页面加载，并且永远不会执行 return语句。 这是一个问题吗？

在你做了location.href=url之后，你离开页面并停止执行当前代码。

从您的代码中，您无法知道当前选择哪个页面。您需要将CSS选择器添加到指示或通过AJAX加载内容的当前元素。

---

选择当前标签：

你需要知道的第一件事是哪个页面对应的选项卡。由于您尚未提供此类信息，我只会假定该网址具有定义选定选项卡的参数tab。

您需要提供currenttab指数在ASPX（TODO：验证查询字符串）：

<%= string.Format("var currentTab = {0};", Request.QueryString["tab"]) => 

而在你的JavaScript中使用此代码：

$('#example').tabs({ 
    selected: currentTab || 0, 
    select: function(event, ui) { 
    var url = $.data(ui.tab, 'load.tabs'); 
    if(url) { 
     location.href = url + "?tab=" + ui.index; 
     return false; 
    } 
    return true; 
    } 
}); 

但请：

请注意，在新的 窗口中打开标签是意想不到的，例如 不一致的行为暴露 易用性问题 （http://www.useit.com/alertbox/tabs.html）。

---

TO LOAD TAB通过Ajax：

我不知道在那里你可以找到你在jQuery的文档发布的代码，但是这是不正确的。

按照docs：

标签支持以不显眼的方式经由 Ajax的装载片内容。

你需要的HTML稍微 从用于 静态选项卡上的一个不同：链接 指向现有资源表（从 其中内容被载入），并在没有 额外的容器全部 （不显眼！）。集装箱的标记 将是动态创建：

所以HTML应该是：

<div id="example"> 
    <ul> 
     <li><a href="ahah_1.html"><span>Content 1</span></a></li> 
     <li><a href="ahah_2.html"><span>Content 2</span></a></li> 
     <li><a href="ahah_3.html"><span>Content 3</span></a></li> 
    </ul> 
</div> 

和JavaScript应该是：

$(function() { 
    $("#example").tabs(); 
});