基础6:如何使用jquery添加选项卡
Foundation 6: How to add tabs using jquery
我正在尝试使用 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">
<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>
但是当我单击该按钮时,我收到以下警告:"尝试初始化已经具有基础插件的元素上的选项卡。 并且我无法单击新选项卡。
当我单击时,我收到此错误:
7123TypeError: undefined is not an object (evaluating '$tabLink[0].hash')
_handleTabChangefoundation.js:7122
(anonymous function)foundation.js:7059
dispatchjquery-2.2.0.js:4731
handlejquery-2.2.0.js:4543
怎么了?
代码中的基本问题是如何初始化选项卡实例。
在基础 6 中,为了创建一个新的选项卡实例(链接),您应该在 js 代码中添加如下内容:
var elem = new Foundation.Tabs($('#example-vert-tabs'));
然后,每次进行更改并添加或删除选项卡时,都可以调用如下所示的内容:
elem = new Foundation.Tabs($('#example-vert-tabs'));
我用你的代码创建了一个代码笔示例,这样你就可以准确地看到发生了什么(http://codepen.io/MKallivokas/pen/xVgrYM):
$(document).ready(function() {
var elem = new Foundation.Tabs($('#example-vert-tabs'));
$("#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>'
);
elem = new Foundation.Tabs($('#example-vert-tabs'));
});
});
相关文章:
- 在Internet Explorer中,向所选内容添加选项不起作用
- 向html选择元素添加选项
- 使用docment.createElement向元素添加选项
- 在带有 bootbox 的自定义对话框中添加选项以选择表单控件.js在 ASP.NET MVC 中
- 具体化选择-不'动态添加选项时不起作用
- Chrome:在用户打开一个选择后添加选项
- 动态添加选项以选择多个JQuery插件
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 向选择框添加选项(如果尚未列出该选项)
- 添加选项以使用 javascript 从 json 文件中选择字段
- 在对象创建器中向 DOM 添加选项
- ExtJS 动态添加选项卡
- 在传单图层组中为空白图块图层添加选项
- 从数组或对象添加选项值和内部 HTML
- 在单击按钮时向高图表添加选项
- 如何添加选项来调整引导盒警报的大小
- jquery- 在<选择>中添加<选项>标签
- 基础6:如何使用jquery添加选项卡
- 添加选项卡窗格后引导选项卡下拉列表不起作用
- 如何向 JavaScript 创建的下拉菜单添加选项