0

我需要 jquery ui 标签来链接到外部 URL，而不是像 #tab1 这样的标签。这是我的代码：

    <li class="ui-tabs-nav-item" id="nav-1">
    <a href="#1">Tab1</a>
    </li>

需要这样：

    <li class="ui-tabs-nav-item" id="nav-1">
    <a href="http://www.page.com" id="1">Tab1</a>
    </li>

jquery 可以读取 id （或类、标题、rel ...）来激活选项卡，而不是 hash href=#1 吗？

谢谢！

4

1 回答 1

1

第一反应

这取决于您所说的“链接到”是什么意思？

如果您想将外部网址“加载”到选项卡面板中，那么您可以在选项卡面板中使用 iframe。当您单击该选项卡时，它只会在 iframe 中显示外部 url 的内容。如果您想延迟加载 iframe 直到单击选项卡，您可以使用 beforeActivate 选项来设置 iframe url。请参阅： http ://api.jqueryui.com/tabs/#event-beforeActivate

如果您想在单击选项卡时使用外部 url 重定向或打开一个新窗口，那么您想查看 beforeActivate 并简单地重定向到您需要的 url。例如 window.location="http://www.page.com"

如果“外部 url”是指同一站点上的另一个页面，那么您需要做的就是设置相对于当前页面的 href。eg href="test-page.html" 看看：看看：http: //jqueryui.com/tabs/#ajax

回应您的第一条评论

在这种情况下，jQuery 选项卡是一种矫枉过正......你可以只使用格式化的 <ul> 元素，但如果你必须使用选项卡，试试这个：

Javascript：

$("#tabs").tabs({
    active: false,
    collapsible: true,
    beforeActivate: function (event, ui) {
        window.open($(ui.newTab).find('a').attr('href'), '_blank');
        return false;
    }
});

HTML：

<div id="tabs">
    <ul>
        <li><a href="http://www.google.com/">Page 1</a></li>
        <li><a href="http://stackoverflow.com/">Page 2</a></li>
    </ul>
</div>

这是它的 jsfiddle：http: //jsfiddle.net/p2GEf/1/

于 2013-06-13T13:12:51.057 回答