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'); 

干杯！