Question

我正在试图弄清楚如何加载每个标签链接到标签区域内的网址，并且一直在尝试关注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');

干杯!!!

jquery选项卡 - 在当前选项卡中加载网址？

2 个答案: