Question

我想确保我在给定标签内点击的任何链接，实际上将该网址调用到标签中...文档说我可以这样做，但这里有一些帖子显示我不是唯一的遇到问题的人......我已经尝试过jQuery UI网站上的代码了，我已经在网站上的其他文章中尝试了这些建议......我确信对于熟悉JS的人来说这是一个很明显的问题和jQuery ......请帮助......

这里是我@到目前为止的地方......（每个'试用版'应该与第一个epag上的其他代码完成 - 它就在这里，所以你有我试过的代码，也许可以看到共性）

<script>
$(document).ready(function(){

// trial #1 - specific ID called into tab - doesn't work
$('#tabs-community').tabs('select', 'tabs-signup');

  $('#blogs').click(function() {
      $('#tabs-bboard').load('blogs.cfm');
 });      

// trial #2 - the documented way - doesn't work
$('#tabs-community').tabs({
    load: function(event, ui) {
    $('a', ui.panel).click(function() {
        $(ui.panel).load(this.href);
    return false;
    });
}
});

// trial #3 - suggestion given on this site - doesn't work
$('#tabs-community').tabs({
    load: function(event, ui) {
    $('a', ui.panel).live('click', function() {
        $(ui.panel).load(this.href);
    return false;
    });
}
});

});

</script>       
<article class="col1">
    <div id="tabs-community" >
        <ul>
            <li><a href="#tabs-bboard">Community</a></li>
            <li><a href="#tabs-signup">Sign-up</a></li>
        </ul>
        <div id="tabs-bboard">
            <cfinclude template="bboard.php"><br/>
        </div>
        <div id="tabs-signup">
            <cfinclude template="signup_form.php"><br/>
        </div>
    </div>
</article>

“bboard.php”看起来像这样

<a href="blogs1.cfm" id="blogs">blogs 1</a>
<a href="blogs2.cfm" >blogs 2</a>
<a href="blogs3.cfm" >blogs 3</a>

所有链接始终作为新页面调用打开...例如，没有将链接加载到选项卡...

感谢您的帮助。

Answer 1

创建加载外部内容的标签的基本方法如下所示。

<script>
    $(function() {
        $('#tabs').tabs();
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="/foo.php">foo</a></li>
        <li><a href="/bar.php">bar</a></li>
    </ul>
</div>

在您的情况下，不要将锚点标记的href指向div，而是将它们指向内容所在的URL。

Answer 2

好的......找出了问题，这很简单。创建页面加载和选项卡时，不会触发加载事件。您的所有点击处理程序都隐藏在选项卡的加载回调中，并且永远不会绑定到选项卡内容中的任何初始链接。因此，初始链接都会加载新页面。

解决方案是将点击处理程序从加载回调中取出。如果使用jquery＆gt; 1.7 live()已弃用，请改用on()。

DEMO：http://jsfiddle.net/c7arQ/

由于jsfiddle

的限制，演示略有不同的ajax

$(function() {

    /* delegate click handler to id=tabs to account for future elements */         
    $('#tabs').on('click', '.ui-tabs-panel a', function(){
        /* get parent tab panel to load into */                                             
        var $panel=$(this).closest('.ui-tabs-panel');
        $panel.load(this.href);
        return false;
    });
    $('#tabs').tabs();

});

编辑：删除您的$（'＃blogs'）点击处理程序以避免重复加载

jQuery UI - 链接w / i选项卡

2 个答案: