CQ5：无法在隐藏容器中编辑 CQ5 文本组件答案

【问题标题】：CQ5 : Could not edit CQ5 Text Component in Hidden containerCQ5：无法在隐藏容器中编辑 CQ5 文本组件
【发布时间】：2013-12-03 14:21:07
【问题描述】：

我们正在 CQ5/AEM 中开发一个选项卡组件。该组件包含 3 个选项卡，每个选项卡都有一个 CQ5 文本组件来编辑内容。

但只有第一个选项卡的文本组件是可编辑的，因为它默认显示。隐藏选项卡内容区域中的其他文本组件不可编辑。

示例代码：

<div>
<div>
    <div id="tabcnt1">
        <div id="tab1" class="tablink">Tab 1</div>
    </div>
    <div id="tabcnt2">
        <div id="tab2" class="tablink">Tab 2</div>
    </div>
    <div id="tabcnt3">
        <div id="tab3" class="tablink">Tab 3</div>
    </div>
</div>
<div class="plantabcontent">        
    <div id="plancontenttab1" class="plancontent">
        <cq:include path="plandescription1" resourceType="libs/foundation/components/text" />
    </div>
    <div id="plancontenttab2" class="plancontent" style="display:none;">
        <cq:include path="plandescription2" resourceType="libs/foundation/components/text" />
    </div>
    <div id="plancontenttab3" class="plancontent" style="display:none;">
        <cq:include path="plandescription3" resourceType="libs/foundation/components/text" />
    </div>
</div>

脚本：

$(document).ready(function(){

   $('.tablink').click(function(){
    $(".tablink").removeClass('selecttab').addClass('plantxt');

    var tabid = $(this).attr("id");
    $("#"+tabid).addClass('selecttab').removeClass('plantxt');  

    $(".plancontent").hide();
    $("#plancontent"+tabid).show();
   });
 });

“plandescription1”默认是可见的，并且工作正常。但是隐藏的文本组件在通过更改选项卡启用它们时不起作用。

请给我一些光。提前致谢。

【问题讨论】：

你能添加一些你用来显示/隐藏标签的js代码，这将有助于更好地调试
嗨 Sahil，我已添加脚本。但我认为脚本对我检查的问题没有影响。请通过并给出一些回应。谢谢。
我无法想象您的问题。我曾经构建了一个类似的组件并使用了 jquery tabs 实用程序，您可以使用它或 jquery ui tabs 来构建这个组件。

标签： aem

【解决方案1】：

在加载页面时加载标签组件（文本组件）很重要。如果默认情况下禁用组件，则 AEM 不会初始化组件。所以禁用 document.ready 上的“隐藏”选项卡，而不是使用 style="display:none"。

在示例中，我添加了 $("div.plancontent:not(:first)").hide(); 以禁用除第一个选项卡以外的所有选项卡。

例子：

<div>
    <div>
        <div id="tab1" class="tablink">Tab 1</div>
        <div id="plancontenttab1" class="plancontent">
            <cq:include path="plandescription1" resourceType="/libs/foundation/components/text" />
        </div>
    </div>
    <div>
        <div id="tab2" class="tablink">Tab 2</div>
        <div id="plancontenttab2" class="plancontent">
            <cq:include path="plandescription2" resourceType="/libs/foundation/components/text" />
        </div>
    </div>
    <div >
        <div id="tab3" class="tablink">Tab 3</div>
        <div id="plancontenttab3" class="plancontent">
            <cq:include path="plandescription3" resourceType="/libs/foundation/components/text" />
        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function(){
        //Disable all tabs except first
        $("div.plancontent:not(:first)").hide();

        //Set clickevent
        $('.tablink').click(function(){

            $(".tablink").removeClass('selecttab').addClass('plantxt');
            var tabid = $(this).attr("id");
            $("#"+tabid).addClass('selecttab').removeClass('plantxt');  

            $(".plancontent").hide();
            $("#plancontent"+tabid).show();
       });
 });
</script>

【讨论】：