jQueryUI选项卡。。。将内容附加到非活动选项卡，单击/激活选项卡时内容保持隐藏_Jquery_Jquery Ui_Jquery Ui Tabs

jQueryUI选项卡。。。将内容附加到非活动选项卡，单击/激活选项卡时内容保持隐藏

jquery jquery-ui

jQueryUI选项卡。。。将内容附加到非活动选项卡，单击/激活选项卡时内容保持隐藏,jquery,jquery-ui,jquery-ui-tabs,Jquery,Jquery Ui,Jquery Ui Tabs,嘿，大家。。。我有一个jQueryUI标签实现，它非常简单，运行良好。嗯，是：）我正在将内容附加到其中一个选项卡，而该选项卡处于非活动状态。单击选项卡时，内容不可见。Firebug显示它在那里，但css属性为display:none 我设想，当选项卡处于非活动状态时，其中的所有内容都设置为显示：无；，单击选项卡时，该内容设置为显示：block（或inline，不确定是哪个）。我假设，因为我在加载页面后附加了额外的内容，jQuery没有“意识到”它。所以猜测我需要在那里的某个地方使用.live（

嘿，大家。。。我有一个jQueryUI标签实现，它非常简单，运行良好。嗯，是：）

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

我设想，当选项卡处于非活动状态时，其中的所有内容都设置为显示：无；，单击选项卡时，该内容设置为显示：block（或inline，不确定是哪个）。我假设，因为我在加载页面后附加了额外的内容，jQuery没有“意识到”它。所以猜测我需要在那里的某个地方使用.live（）方法，但不确定在哪里，因为我似乎必须操作jQuery选项卡代码本身

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

总而言之。。。如果使用jQuery的.append（）将数据附加到当前为非活动jQueryUI选项卡的节点。。。当选项卡变为活动状态时，我如何获取要显示的数据

谢谢

它应该与

append（）

和jquery UI一起使用。是否确实仅将数据附加到选项卡数据容器？我想您正在做类似于only的事情。

它应该与

append（）

和jquery UI一起工作。是否确实仅将数据附加到选项卡数据容器？我想您正在执行类似于“仅”的操作。

如果选项卡被隐藏，则设置为显示：无；如果不是，则设置为display: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并点击回车键：







青蒿素、金樱子、天妇罗、金樱子a、金樱子。库拉比图尔nec arcu。我坐在阿梅特·莫里斯旁边。这是一个很好的例子。埃蒂亚姆·阿利奎特·马萨和洛雷姆。毛里斯·达比乌斯·拉库斯·奥克托·里苏斯。埃涅亚临时乌拉姆科珀狮子座。维瓦摩斯·塞德·马格纳·奎斯·利古拉·埃利弗德·阿迪皮斯。杜伊斯·奥奇。苏打水煎饼或同侧生命。阿利奎姆·努拉。我是阿利奎姆·莫莱斯蒂·埃拉特。这是一种新的葡萄品种。这是我的梦想。同侧相位。努克·特里斯蒂克·坦普斯·莱克图斯
Morbi tincidunt，我坐在医院里，看医生，看医生，看医生，看医生。杜伊斯·塞勒里克·莫莱斯蒂·图皮斯。塞德·弗林利亚，马萨·埃吉特·卢克图斯·马莱苏阿达，梅特斯·厄洛斯·莫莱斯蒂·莱克托斯，我们的厄洛斯·多洛。埃尼安·阿利奎特·弗林利亚。悬钩子在舌苔中是舌苔。在爱神的前庭里祈祷。临床医生。库拉比图尔·奥纳雷·康塞奎特·努克。埃尼安·韦尔梅特斯。乌特·波苏尔·维韦拉·努拉。阿利奎姆·埃拉特·帕特。佩伦茨克康瓦利斯。梅塞纳斯·费吉亚、佩伦特斯·普雷蒂姆·波苏尔、猫科动物奥勒姆·尤伊斯莫·费利斯、欧纳·利奥·尼西·维勒·费利斯。毛里斯·康塞德图尔·托托和珀鲁斯
毛里斯·埃利芬德和图皮斯。酒后驾车。潜力悬钩子。这是一种腐败，是一种腐败，是一种腐败，是一种腐败，是一种腐败，是一种腐败。前庭无前庭。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。Fusce苏打啤酒。这是一个很好的例子。这是一种很好的治疗方法。库拉比图尔·洛雷姆·埃尼姆、普雷蒂姆·内克、福吉亚·内克、卢克图斯·a、拉克斯
杜伊斯·库苏斯。梅塞纳斯·利古拉·厄罗斯、布兰迪·内克、法雷特拉、森佩尔、麦格纳。纳拉姆ac拉克斯。无便利。普雷森特·维韦拉·胡斯托·维塔·内克。普拉森特·布兰迪特·维利特。潜力悬钩子。Donec mattis，pede vel pharetra blandit，magna ligula faucibus eros，id euismod lacus dolor eget odio。南斯克利斯克。Donec non libero sed nulla mattis commodo。Ut矢状位。Donec nisi lectus，封建者porttitor，临时ac，临时vitae，pede。这是一种交通工具。Maecenas commodo。佩伦茨克nec精英。拉库斯的福斯。维瓦摩斯是自由人，莱克图斯·亨德雷特·亨德雷特
（函数（$）{
$（“#制表符”）.tabs（）；
$（“#添加内容”）。更改（函数（e）{
var$this=$（this）；
$（'#tabs-2'）.append（$this.val（））；
$this.val（“”）；
});
}（jQuery））；

如果您在输入框中输入一些HTML，然后转到第二个选项卡，您将看到它被附加到第二个选项卡。

<!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并点击回车键：







青蒿素、金樱子、天妇罗、金樱子a、金樱子。库拉比图尔nec arcu。我坐在阿梅特·莫里斯旁边。这是一个很好的例子。埃蒂亚姆·阿利奎特·马萨和洛雷姆。毛里斯·达比乌斯·拉库斯·奥克托·里苏斯。埃涅亚临时乌拉姆科珀狮子座。维瓦摩斯·塞德·马格纳·奎斯·利古拉·埃利弗德·阿迪皮斯。杜伊斯·奥奇。苏打水煎饼或同侧生命。阿利奎姆·努拉。我是阿利奎姆·莫莱斯蒂·埃拉特。这是一种新的葡萄品种。这是我的梦想。同侧相位。努克·特里斯蒂克·坦普斯·莱克图斯
Morbi tincidunt，我坐在医院里，看医生，看医生，看医生，看医生。杜伊斯·塞勒里克·莫莱斯蒂·图皮斯。塞德·弗林斯、马萨·埃吉特·卢克图斯·马莱苏阿达、梅特斯·厄洛斯·莫莱斯蒂·莱克特