我可以将 jQuery UI 选项卡小部件配置为在用户单击选项卡时转到新页面吗？

Question

使用 jQuery UI 选项卡小部件的默认方法是将每个选项卡的内容放在同一 html 页面上的 div 中。每个选项卡是否可以链接到不同的页面？

Answer 1

在这种情况下，为什么要使用 jQuery 选项卡而不是普通的 HTML ？

我想您可以添加一个选项卡更改处理程序，使用 window.location 导航到新地址，如下所示：

$('#myTabs').tabs();
$('#myTabs').bind('tabsselect', function(event, ui) {
    // you can access clicked tab index as ui.index
window.location = "foo.html";
});    

编辑，如果您只想为样式执行此操作，您可以简单地将正确的类添加到您的elements：

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Active tab</li>
        <li class="ui-state-default ui-corner-top">Inactive tab</li>
    </ul>
</div>

即使用户禁用了浏览器中的所有 JavaScript，这也将起作用。