单击按钮时附加到垂直手风琴 jquery
Append to vertical accordion on button click jquery
我有一个水平标签,在里面,我有一个垂直标签功能。在垂直选项卡中,我提供了一个名为 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 部分:
<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你可以看看
首先,您需要使用 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");
});
});
另请注意,您的 click
处理程序应位于 $(function() {})
处理程序内。
我有一个水平标签,在里面,我有一个垂直标签功能。在垂直选项卡中,我提供了一个名为 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 部分:
<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你可以看看
首先,您需要使用 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");
});
});
另请注意,您的 click
处理程序应位于 $(function() {})
处理程序内。