Question

嘿所有......我有一个jQueryUI标签实现，非常简单，工作正常。好吧，是：）

我将内容附加到其中一个标签页，而标签页处于非活动状态。单击选项卡时，内容不可见。 Firebug显示它在那里，但显示的css属性为：none。

我想当选项卡处于非活动状态时，其中的所有内容都设置为display：none;，并且当单击选项卡时，该内容将设置为display：block（或内联，不确定哪个）。我假设因为我在页面加载后附加了额外的内容，jQuery没有“意识到”它。所以猜测我需要在那里使用.live（）方法，但不知道在哪里，因为看起来我必须操纵jQuery标签代码本身？

没有任何相关的代码可以发布，因为它非常简单......但是如果有人认为它会有所帮助，我会在这里抛出一些片段。

总结一下......如果使用jQuery的.append（）将数据附加到当前是非活动jQueryUI选项卡的节点...如何在选项卡变为活动状态时显示该数据？

谢谢！

Answer 1

它应该与append()和jquery UI一起使用。您确定仅将数据附加到标签数据容器吗？我想你只做working demo之类的事情。

Answer 2

你是正确的，当隐藏一个标签时，它被设置为display：none;当它不是时，它设置为显示：block;。我测试了你的技术（使用jQuery的append（）），它对我来说很好。这是我的测试代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" /> 
</head>
<body>
    Enter some HTML and hit Enter: <input id="add-content" style="width: 300px;" /><br /><br />
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        </div>
        <div id="tabs-2">
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
        </div>
        <div id="tabs-3">
            <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
    <script>
        (function ($) {
            $("#tabs").tabs();

            $('#add-content').change(function (e) {
                var $this = $(this);
                $('#tabs-2').append($this.val());
                $this.val('');
            });

        } (jQuery));
    </script>
</body>
</html>

如果您在输入框中输入了一些HTML，然后转到第二个标签页，您会看到它已附加到第二个标签页。

jQueryUI选项卡...将内容附加到非活动选项卡，单击选项卡时激活内容

2 个答案: