Question

我有一个水平标签，在里面，我有一个垂直标签功能。在垂直标签中，我提供了一个名为Add More的按钮，如下所示：

<button id="addMore" type="button">Add More</button>

单击该按钮，我想将新标签添加到上一个标签。

点击按钮上的方法：

$('#addMore').on('click', function() {
    $('#vtabs ul li').last().append('<li><a href="#option1">Option 1</a></li>');
    $('#vtabs div').last().append('<div id="option1">dsg</div>');

    $("#vtabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#vtabs > ul > li").removeClass("ui-corner-top").addClass("ui-corner-left");
});

Html Part：

<div id = "htabs-outer">
    <h1>htabs-outer</h2>
    <ul>
        <li><a href="#htab-outer-2">Horizontal Tab 2</a></li>
    </ul>

    <div id = "htab-outer-2">
        <h2>Htab outer 2 content</h2>
        <div id="vtabs">
            <h1>Vtabs</h1>
            <ul>
                <li><a href="#vtab-1">Vertical Tab 1</a></li>
                <li><a href="#vtab-2">Vertical Tab 2</a></li>
                <li><a href="#vtab-3">Vertical Tab 3</a></li>
            </ul>
            <div id="vtab-1">
                <h2>Vtab 1 content</h2>
            </div>
            <div id="vtab-2">
                <h2>Vtab 2 content</h2>
            </div>
            <div id="vtab-3">
                <h2>Vtab 3 content</h2>
            </div>
        </div>
        <button id="addMore" type="button">Add More</button>
    </div>
</div>

这会附加到最后一个li元素，但不能正常运行。

我希望如果单击该按钮，它应该附加到垂直选项卡，并且还应附加其对应的div。

我犯了什么错误？

您可以查看fiddle

Answer 1

首先，您需要使用after()添加新标签页，因为append()将其置于现有标签结构中，这是不正确的。其次，您还需要在选项卡上调用refresh以添加所需的样式和事件。试试这个：

$(function () {
    $("#htabs-outer").tabs();

    var $vtabs = $('#vtabs').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $vtabs.find('> ul > li').removeClass("ui-corner-top").addClass("ui-corner-left");

    $('#addMore').on('click', function () {
        $vtabs
            .find('ul li:last').after('<li><a href="#option1">Option 1</a></li>').end()
            .find('div:last').after('<div id="option1">dsg</div>').end()
            .tabs('refresh').addClass("ui-tabs-vertical ui-helper-clearfix").end()
            .find("> ul > li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });
});

Updated fiddle

另请注意，您的click处理程序应位于$(function() {})处理程序中。

按钮点击jquery附加到垂直手风琴

1 个答案: