Question

我正在使用NoMethodError in Home#index private method 'to_param' called for #<Post:0x007fae3096bf78>生成一些嵌套标签（水平和垂直标签）。

jquery.easyResponsiveTabs

在顶部的按钮＆＃34; add-tab ＆＃34;应该在<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>中生成一些新的水平标签。这适用于标题页，但我无法正确显示标签内容，我无法突出显示或激活所选标签，任何想法在此代码中有什么问题？

parentHorizontalTab

Answer 1

简答：如果您只是将参数传递到代码中$("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>

这样，您就可以点击新标签页并查看其内容。

使用easyResponsiveTabs创建动态选项卡

1 个答案: