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

时间:2014-01-04 19:57:55

标签: javascript jquery html

就像标题所说,我想使用我的最后一个标签作为我网站中另一个网页的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

但是这种情况发生了:图像偏离中心,我假设它是因为双href。

enter image description here

有没有人有任何其他建议?我已经搜索过一个解决方案,但没有真正表现出来。谢谢。

3 个答案:

答案 0 :(得分:2)

嵌套的<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/

答案 1 :(得分:0)

我认为小Jquery代码会有所帮助

$(function(){
  $('#tabs-3').click(function(){
    window.open("http://randomurl.com", '_blank');
  });
})

答案 2 :(得分:0)

如果我正确理解了这个问题,您可以在没有javascript的情况下在新标签页中打开最后一个链接。在html中,最后一个链接看起来像这样......

<li><a href="http://example.com" class="external" target="_blank"> Link </a></li>

您只需要添加target =“_ blank”