javascript - Jquery 特定选项卡打开 url 而不是选项卡

Question

如标题所述，我想将我的最后一个选项卡用作指向我网站内另一个网页的 URL 链接，而不必指定整个 url，我知道这可能需要某种 javascript。以下是我尝试过的事情。

<div id="tabs">
    <ul>
       <li> <a href="#tabs-1"> Tab 1</ a> </ li>
       <li> <a href="#tabs-2"> Tab 2 </ a> </ li>
       <li> <a href="#tabs-3"> Link </ a> </ li>
    </ul>

    <div id="tabs-1">
       <p> Tab 1 content </ p>
    </ div>
    <div id="tabs-2">
       <p> Tab 2 content </ p>
    </ div>
    <div id="tabs-3"></ div> //shouldn't be needed etc
</ div>.

我已经试过了:

<li><a href="#tabs-3"><a href="http://randomurl.com">Home</a></a></li> 

Stack Link

但会发生这种情况:图像偏离中心，我假设是因为双 a href。

有没有人有任何其他建议？我已经搜索了一个解决方案，但没有真正出现。谢谢。

Answer 1

嵌套 <a>标签不是有效的 HTML，因此我建议不要使用您提到的 SO 问题中的解决方法。

您可以为外部链接添加一个 onclick 监听器，如下所示:

HTML:

<div id="tabs">
    <ul>
       <li><a href="#tabs-1"> Tab 1</a></li>
       <li><a href="#tabs-2"> Tab 2 </a></li>
       <li><a href="http://example.com" class="external"> Link </a></li>
    </ul>

    <div id="tabs-1">
       <p> Tab 1 content </p>
    </div>
    <div id="tabs-2">
       <p> Tab 2 content </p>
    </div>
</div>

JS:

$(document).ready(function(){
    $('#tabs').tabs();
    $('.external').click(function(){
        window.location.href=$(this).attr('href'); //opens in same tab/window

        //window.open($(this).attr('href'), '_blank'); //opens in new tab  
    });
});

http://jsfiddle.net/cRW5y/