Question

我正在尝试根据按钮点击动态添加引导标签。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">
</script>
</head>
<body>

<script id="tabTemplate" type="text/x-jquery-tmpl"> 
    <div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>
</script>

<a href="#" id="btnAdd"><i class="icon-plus-sign-alt"></i> Add Tab</a>

<ul class="nav nav-tabs" id="tabs">
    <li class="active"><a href="#tab1">Tab 1</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">Hello tab #1 content...</div>
</div>

<script>
$(document).ready(function() {

$('#btnAdd').click(function (e) {
    e.preventDefault();
    var nextTab = $('#tabs li').size()+1;

    // create the tab
    $('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs');

    // create the tab content
    $('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');

    // make the new tab active
    $('#tabs a:last').tab('show');
});

});

我正在尝试将＆＃39; //创建标签内容＆＃39;到模板但仍然有标签ID增量。

这是一个fiddle

有人可以帮忙吗？我似乎无法使用模板使其工作，并且需要选项卡来存储更多信息。

Answer 1

我的工作正常，请参阅此fiddle

我需要使用模板传递javascript变量/值：

$.tmpl( tabTemplate, { "device" : nextTab }).appendTo('.tab-content');

并在我的模板中加以改进：

<script id="tabTemplate" type="text/x-jquery-tmpl"> 
    <div class='tab-pane' id='tab${device}'>${device}</div>
</script>

希望这有助于某人。

jQuery引导程序选项卡模板追加

1 个答案: