使用bootstrap/jquery动态添加tabs/tab内容的更干净的方法

a cleaner way to add tabs/tab content dynamically with bootstrap/jquery?

本文关键字：方法 tab jquery bootstrap 动态 添加 tabs 使用      更新时间：2023-09-26

我目前正在动态添加选项卡，如下所示：

$('input[type="checkbox"]').on('click', function () {
    var hotel = $(this).is(':checked');
    if (hotel) {
        $('.nav-tabs').append('<li class="hotel"><a href="#hotel" data-toggle="tab">Hotel</a></li>');
        $('.tab-content').append('<div class="tab-pane hotel" id="hotel"><div>lol</div></div>');
    } else {
        $('.hotel').remove();
    }
});

但我认为这真的很混乱，因为在我的JS中生成了很多html。这些选项卡基本上将包含表单输入，所以我可以看到这个javascript很快就会变得一团糟。

我这样做对吗？还是有更简单的方法？

将酒店选项卡添加到标记中，但默认情况下隐藏它怎么样？将display: none;添加到.hotelCss类中，javasript将类似于以下内容：

$('input[type="checkbox"]').on('click', function () {
    var hotel = $(this).is(':checked');
    $('.hotel').toggle(hotel);
});
相关文章：