Question

我们正在 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'可见，并且工作正常。但是隐藏的文本组件在通过更改选项卡启用它们时不起作用。

请告诉我一些亮点。提前谢谢。

Answer 1

加载页面时加载选项卡组件（文本组件）很重要。如果组件默认禁用，则组件不会由AEM初始化。因此，请停用隐藏的＆＃39; document.ready上的选项卡而不是使用style =＆＃34; display：none＆＃34;。

在示例中，我添加了 $（＆＃34; div.plancontent：not（：first）＆＃34;）。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>

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

1 个答案: