Question

我刚刚开始使用Jquery ui标签。选项卡的内容主要由静态内容组成。

现在，面板中的一些内容确实具有某种子内容的链接。因此，如果用户点击面板中的链接，我想用来自链接的内容替换当前面板的内容。

所以我直接从jquery ui tab文档中使用了脚本，但是我无法让它工作。它总是直接打开链接，而不是在面板内。我用于测试的代码非常简单：

<div id="MyTabs">
    <ul>
        <li><a href="#TestTab1">TestTab</a></li>
        <li><a href="#TestTab2">TestTab</a></li>
    </ul>
    <div id="TestTab1">
        Lorem ipsum dolor. dumm di dumm
        <a href="http://mywebserver/somelink">Test</a>
    </div>
    <div id="TestTab2">
        Lorem ipsum dolor. dumm di dumm 2
        <a href="http://mywebserver/somelink2">Test 2</a>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#MyTabs').tabs({
            load: function(event, ui) {
                $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;

                });
            }
        });
    });

此外，如果我使用AJAX调用加载了面板的内容，则面板内的任何链接都无法正常工作。

知道我做错了吗？

非常感谢帮助

此致

MAIK

EDIT1：

好的，我进一步了。我用以下代码替换了Javascript：

        $(function() {
        $("#MyTabs").tabs();
        $("#MyTabs").bind('tabsshow', function(event, ui) {
            AddClickHandler(ui);
        });
    });

    function AddClickHandler(ui) {
        $('a', ui.panel).click(function() {
            MyAlert("AddClickHandler");
            $(ui.panel).load(this.href, AddClickHandler(ui));
            return false;
        });
    }

更改后，面板上的所有链接都将更新当前面板的内容。到现在为止还挺好。还有一个问题。我不能让它为后续链接工作。当ajax调用完成后，我尝试使用第二个“AddClickHandler”进行回调。使用具有简单警报的不同功能显示它实际上是在更新面板内容时调用的。但我无法将任何内容绑定到该内容中的新链接。 “$（'a'，ui.panel）......”不起作用。什么是正确的选择器？

任何提示？

此致

MAIK

Answer 1

看起来并不正确......

示例如下所示：

<div id="example">
     <ul>
         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
     </ul>
</div>

请注意，链接位于TAB中，而不是标签内容

修改好的，我想我看到了你的问题。我没有看到任何代码，您可以在选项卡中注册这些链接的打开。因此，当用户点击链接时，它将在浏览器窗口内打开，就像普通链接一样..无论如何。

尝试这样的事情：

$("#MyTabs").find("a").click(function(){ $(this).parent(".ui-tabs-panel").load(this.href); return false; });

<强> EDIT2：我刚刚意识到你的“加载”功能和我上面写的功能一样。无论如何，尝试我的功能，看看它是否有效，如果它通过你的功能与firebug一步一步，看看有什么不同，如果它没有..通过你的功能与firebug ...或提供在线演示，我可以看看它

<强> EDIT3：好的，这是更好的解决方案：

添加此功能：

var bindAjaxLinks = function(){ $("#MyTabs").find("a").click(function(){ $(this).parent(".ui-tabs-panel").load(this.href, {}, bindAjaxLinks); return false; }); } //in the tabs constructor add the select function: $("#MyTabs").tabs({select: function(event, ui) { bindAjaxLinks(); }, //your other stuff }

可能不是最佳解决方案，因为每次打开链接时它都会将点击功能重新绑定到所有链接。但现在可能还可以，除非你正在建立一些生产基地

Answer 2

你可以使用live（），如下所示：

$("#myTabs").tabs({
        load: function(event, ui) {
         $("#myTabs").find("a").live('click', function() {
        $(ui.panel).load(this.href);
        return false;
    });
}})

jquery选项卡 - 当前面板中的“打开链接”不起作用

2 个答案: