點擊選項卡打開一個新網頁

Question

這是我的代碼..當我單擊第二個選項卡即tab2時，我想打開facebook

<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();

return false;
    });

});
</script>
</head> 

<body> 

<div class="container"> 
    <ul class="tabs"> 
        <li><a href="#tab1">tab1</a></li> 
        <li><a href="#tab2">tab2</a></li> 
        <li><a href="#tab3">tab3</a></li> 
        <li><a href="#tab4">tab4</a></li> 
    </ul> 
        <div class="tab_container"> 
        <div id="tab1" class="tab_content"> 


    <p>No Data Available</p>
    </div> 

    <div id="tab2" class="tab_content" > 

    </div> 

    <div id="tab3" class="tab_content"> 

        </div> 
        <div id="tab4" class="tab_content"> 
        </div> 
    </div> 
</div> 


</body> 
</html>

Answer 1

怎么樣：

<li><a href="http://facebook.com">tab2</a></li>

盡管我會說將選項卡鏈接起來是非常不直觀的，而且也不是很好的UI習慣。

Answer 2

更改

<li><a href="#tab2">tab2</a></li>

至

<li><a href="http://www.facebook.com">tab2</a></li>

Answer 3

然后像這樣將href='http://www.facebook.com'為tag2：

<li><a href="http://www.facebook.com">tab2</a></li>

Answer 4

您需要從click事件中排除Facebook鏈接，以便可以在其位置使用普通鏈接。

將點擊事件代碼更改為：

$("ul.tabs li:not(.external)").click(function() { 
    ...

和應該打開Facebook的選項卡

<li class="external"><a href="http://www.facebook.com">tab2</a></li>

演示： http ： //jsfiddle.net/eBHa5/

點擊選項卡打開一個新網頁

問題描述

4 個解決方案

解決方案1
4 2011-09-12 14:42:05

解決方案2
2 2011-09-12 14:43:04

解決方案3
1 2011-09-12 14:44:19

解決方案4
0 2011-09-12 15:33:34

點擊選項卡打開一個新網頁

問題描述

4 個解決方案

解決方案1 4 2011-09-12 14:42:05

解決方案2 2 2011-09-12 14:43:04

解決方案3 1 2011-09-12 14:44:19

解決方案4 0 2011-09-12 15:33:34

解決方案1
4 2011-09-12 14:42:05

解決方案2
2 2011-09-12 14:43:04

解決方案3
1 2011-09-12 14:44:19

解決方案4
0 2011-09-12 15:33:34