javascript - 使用easyResponsiveTabs动态创建标签

我正在使用jquery.easyResponsiveTabs生成一些嵌套选项卡(水平和垂直选项卡)。

<div class="container-fluid" style="margin-top:5px;">
    <button id="add-tab">Add tab (will be replaced by a reader on the list of available apps)</button>
    <div id="parentHorizontalTab">
        <ul class="resp-tabs-list hor_1">
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
        </ul>
        <div class="resp-tabs-container hor_1">
            <div>
                <div id="ChildVerticalTab_1" style="height:100%;">
                    <ul class="resp-tabs-list ver_1">
                        <li>V0</li>
                        <li>V1</li>
                        <li>V2</li>
                    </ul>
                    <div class="resp-tabs-container ver_1" style="height:100%;">
                        <div>
                            <p>Test V1.</p>
                        </div>
                        <div >
                            <p>Test V2.</p>
                        </div>
                        <div >
                            <p>Test V3.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                 Lorem ipsum<br><br>
            </div>
            <div>
                Lorem ipsum<br><br>
            </div>
        </div>
    </div>
</div>

在顶部，“add-tab”按钮应在parentHorizontalTab中生成一些新的水平选项卡。这对于选项卡标题很有效，但是我无法正确显示选项卡内容，也无法突出显示或激活所选的选项卡，知道这个代码有什么问题吗？

<script type="text/javascript">
    $(document).ready(function () {
        $("button#add-tab").click(function(){
            var num_htabs=$("div#parentHorizontalTab ul.resp-tabs-list.hor_1 li").length;
            $("div#parentHorizontalTab ul.resp-tabs-list.hor_1").append(
                    "<li class='resp-tab-item hor_1 resp-tab-active' aria-controls='hor_1_tab_item-" + num_htabs +"' role='tab' style='background-color: rgb(245, 245, 245);'>V" + num_htabs + "</li>"
            );

            $("div#parentHorizontalTab div.resp-tabs-container.hor_1").append(
                    "<h2 class='resp-accordion hor_1' role='tab' aria-controls='hor_1_tab_item-" + num_htabs2 +"' style='border-color: rgb(193, 193, 193); background-color: rgb(245, 245, 245);'> \
                     <span class='resp-arrow'></span>\
                     V" + num_htabs + "\
                     </h2>");

            $("div#parentHorizontalTab div.resp-tabs-container.hor_1").append(
                    "<div class='resp-tab-content hor_1' aria-labelledby='hor_1_tab_item-" + num_htabs2 +"'>Lorem ipsum</div>"
            );
            $("div#parentHorizontalTab").easyResponsiveTabs();
        });

        $('#parentHorizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            //height: 'auto',
            fit: true, // 100% fit in a container
            closed: 'accordion', // Start closed if in accordion view
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function (event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);

                $name.text($tab.text());

                $info.show();
            }
        });

        $('#ChildVerticalTab_1').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            //height: 'auto',
            fit: true,
            tabidentify: 'ver_1', // The tab groups identifier
            activetab_bg: '#fff', // background color for active tabs in this group
            inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
            active_border_color: '#d0335a', // border color for active tabs heads in this group
            active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
        });
    });
</script>

最佳答案

简短答案:，如果您简单地将参数传递给$("div#parentHorizontalTab").easyResponsiveTabs();函数中具有click的代码部分，则您的代码将起作用。

进一步说明:如果将代码的第一部分更改为:

<script type="text/javascript">
    $(document).ready(function () {
        $("button#add-tab").click(function(){
            var num_htabs=$("div#parentHorizontalTab ul.resp-tabs-list.hor_1 li").length;
            $("div#parentHorizontalTab ul.resp-tabs-list.hor_1").append(
                    "<li class='resp-tab-item hor_1 resp-tab-active' aria-controls='hor_1_tab_item-" + num_htabs +"' role='tab' style='background-color: rgb(245, 245, 245);'>V" + num_htabs + "</li>"
            );

            $("div#parentHorizontalTab div.resp-tabs-container.hor_1").append(
                    "<h2 class='resp-accordion hor_1' role='tab' aria-controls='hor_1_tab_item-" + num_htabs +"' style='border-color: rgb(193, 193, 193); background-color: rgb(245, 245, 245);'> \
                     <span class='resp-arrow'></span>\
                     V" + num_htabs + "\
                     </h2>");

            $("div#parentHorizontalTab div.resp-tabs-container.hor_1").append(
                    "<div class='resp-tab-content hor_1' aria-labelledby='hor_1_tab_item-" + num_htabs +"'>Lorem ipsum</div>"
            );

            // Here is where you'll add more options/parameters..
            $("div#parentHorizontalTab").easyResponsiveTabs({
                type: 'default',
                width: 'auto',
                //height: 'auto',
                fit: true,
                closed: 'accordion',
                tabidentify: 'hor_1',
                activate: function (event) {
                    var $tab = $(this);
                    var $info = $('#nested-tabInfo');
                    var $name = $('span', $info);

                    $name.text($tab.text());

                    $info.show();
                }
            });
        });

        ....
        ....
        ....
    });
</script>

这将使您能够单击新选项卡并查看其内容。

关于javascript - 使用easyResponsiveTabs动态创建标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39258297/