0

我想确保我在给定选项卡内单击的任何链接，实际上都将该 URL 调用到选项卡中......文档说我可以做到这一点，但是这里有一些帖子表明我不是唯一一个遇到问题...我已经尝试过来自 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>

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

谢谢你的帮助。

4

2 回答 2

0

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

解决方案是将点击处理程序从负载回调中取出。live()如果不推荐使用 jquery > 1.7 ，请on()改用。

演示：http: //jsfiddle.net/c7arQ/

由于 jsfiddle 的限制，Demo ses 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') 点击处理程序以避免重复加载

于 2012-06-17T01:39:15.737 回答
0

创建加载外部内容的选项卡的基本方法如下所示。

<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。

于 2012-06-17T01:11:27.340 回答