jquery tabs - 在当前选项卡中加载 url？

Question

我试图弄清楚如何加载每个选项卡链接到选项卡区域内 onclick 的 url，并且一直在尝试遵循 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');

干杯！！！