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

您引用的页面用于加载当前选项卡中的选项卡上引用的链接，而不是从链接中加载选项卡本身。 您无需使用load方法就可以将链接作为选项卡使用。

您真正需要的就是这个（您可以省略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');

干杯！！！