jquery選項卡 - 在當前選項卡中加載url？

Question

我試圖找出如何加載的URL標籤區域內的onclick每個標籤的鏈接，並一直試圖在http://docs.jquery.com/UI/Tabs#...open_links_in_the_current_tab_instead_of_leaving_the_page下面的文檔，但我顯然沒有得到它....

這是的HTML標記：

<div class="tabs"> 
    <ul class="tabNav"> 
    <li><a href="/1.html#tabone">Tab One</a></li> 
    <li><a href="/2.html#tabtwo">Tab Two</a></li> 
    <li><a href="/3.html#tabthree">Tab Three</a></li> 
    </ul> 
</div> 

<div id="tabone"> 
    <!-- Trying to load content from 1.html in this div on click --> 
</div> 

<div id="tabtwo"> 
    <!-- Trying to load content from 2.html in this div on click --> 
</div> 

<div id="tabthree"> 
    <!-- Trying to load content from 3.html in this div on click --> 
</div> 

這是我試圖使用jQuery的：

$(".tabs").tabs({ 
    load: function(event, ui) { 
      $('a', ui.panel).click(function() { 
        $(ui.panel).load(this.href); 
        return false; 
       }); 
    } 
    }); 

我知道我有這個錯誤的某些部分....我已經走了通過幾次迭代（太多發佈），我得到的只是一個空白的div ......我不知道......感覺有點困惑......幫助？

Answer 1

您引用的頁面旨在用於在當前選項卡中的選項卡上加載標記爲的鏈接，而不是從鏈接加載選項卡本身。您不需要使用加載方法將鏈接作爲製表符工作。

所有你真正需要的是這個（你可以省略tab容器DIVS）。我假設其他標籤是相對的，並代表完整的標籤內容，所以我刪除了前導碼/和散列。

<div class="tabs"> 
    <ul class="tabNav"> 
    <li><a href="1.html" title="Tab One">Tab One</a></li> 
    <li><a href="2.html" title="Tab Two">Tab Two</a></li> 
    <li><a href="3.html" title="Tab Three">Tab Three</a></li> 
    </ul> 
</div> 

<script type="text/javascript"> 
    $(function() { // note wrap in 'ready" function to make sure DOM is loaded 
     $('.tabs).tabs(); 
    }); 
</script> 

Answer 2

請確保您在加載選項卡後也添加以下JS代碼。

$('#tabs ul li.ui-tabs-selected a').click(function(){ 
       location.href = $(this).attr('href'); 
       return false; 
     }).css('cursor', 'pointer'); 

乾杯！