Javascript 基础6:如何使用jQuery添加选项卡
我想在jQuery中添加一个标签。请参阅我的演示代码:Javascript 基础6:如何使用jQuery添加选项卡,javascript,jquery,tabs,zurb-foundation,Javascript,Jquery,Tabs,Zurb Foundation,我想在jQuery中添加一个标签。请参阅我的演示代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tab Test</title> <link href="foundation-6/css/foundation.css" type="text/css" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab Test</title>
<link href="foundation-6/css/foundation.css" type="text/css" rel="stylesheet">
<script src="jquery-2.2.0.js"></script>
<script src="foundation-6/js/foundation.js"></script>
</head>
<body>
<div class="row"><div class="large-12 columns"><button type="button" id="button1">Click Me!</button></div></div>
<div class="row collapse">
<div class="medium-3 columns">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
<li class="tabs-title"><a href="#panel4v">Tab 4</a></li>
<li class="tabs-title"><a href="#panel5v">Tab 5</a></li>
<li class="tabs-title"><a href="#panel6v">Tab 6</a></li>
</ul>
</div>
<div class="medium-9 columns">
<div class="tabs-content vertical" data-tabs-content="example-vert-tabs" id="tab_content">
<div class="tabs-panel is-active" id="panel1v">
<p>Test1</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Test2</p>
</div>
<div class="tabs-panel" id="panel3v">
<p>Test3</p>
</div>
<div class="tabs-panel" id="panel4v">
<p>Test4</p>
</div>
<div class="tabs-panel" id="panel5v">
<p>Test5</p>
</div>
<div class="tabs-panel" id="panel6v">
<p>Test6</p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
$("#button1").click(function() {
$("#example-vert-tabs").append('<li class="tabs-title"><a href="#panel7v">Tab 7</a></li>');
$("#tab_content").append('<div class="tabs-panel" id="panel7v"><p>Test7</p></div>');
$(".tabs").foundation();
});
});
</script>
</body>
</html>
怎么了?代码中的基本问题是如何初始化选项卡实例
在基础6中,为了创建一个新的制表符实例(),你应该把你的JS代码添加到这样的东西:
var elem = new Foundation.Tabs($('#example-vert-tabs'));
elem = new Foundation.Tabs($('#example-vert-tabs'));
然后,每次进行更改并添加或删除选项卡时,您都可以调用如下内容:
var elem = new Foundation.Tabs($('#example-vert-tabs'));
elem = new Foundation.Tabs($('#example-vert-tabs'));
我用您的代码创建了一个codepen示例,这样您就可以确切地看到发生了什么():
$(文档).ready(函数(){
var eLe=新的基础。选项卡($(‘示例VRT选项卡));
$(“#按钮1”)。单击(函数(){
$(“#示例垂直选项卡”).append(
“”
);
$(“#选项卡内容”)。追加(
“Test7”
);
ELEM =新基金会(TABS)($(‘示例VRT选项卡));
});
});
谢谢您的帮助!:)