jquery ui tabs将哈希值更改为外部URL

时间:2013-06-13 12:17:43

标签: jquery jquery-ui jquery-ui-tabs hashtag

我需要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(或class,title,rel ...)来激活制表符,而不是hash href =#1?

谢谢!

1 个答案:

答案 0 :(得分:1)

第一反应

这取决于“链接到”的含义?

如果要将外部网址“加载”到标签面板中,则可以在标签面板中使用iframe。当您单击该选项卡时,它只显示iframe中外部URL的内容。如果要延迟加载iframe直到单击选项卡,可以使用beforeActivate选项设置iframe网址。看到: http://api.jqueryui.com/tabs/#event-beforeActivate

如果要在单击选项卡时使用外部URL重定向或打开新窗口,则需要查看beforeActivate并简单地重定向到所需的URL。例如。 window.location的= “http://www.page.com”

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

回复您的第一条评论

在这种情况下,jQuery标签是一种矫枉过正......你可以使用格式化的&lt; ul&gt;元素,但如果您必须使用标签,请尝试:

使用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/