您好,我想根据来自数据库的列表使用 Jquery 动态添加选项卡。每个选项卡内容也是列表。因此,当我单击每个选项卡时,仅应显示该选项卡内容。我能够动态添加选项卡,但一次显示所有选项卡内容(数据)。我想根据选项卡单击显示列表。例如:如果单击“管理器”选项卡,则仅应显示管理器列表(如果单击)在“受训者”选项卡上,仅应显示受训者详细信息。
链接:http://www.jankoatwarpspeed.com/dynamic-tabs-using-jquery-why-and-how-to-create-it/
提前致谢
最佳答案
$('#tabs a.tab').live('click', function() {
// Get the tab name
var contentname = $(this).attr("id") + "_content";
// hide all other tabs
$("#content p").hide();
$("#tabs li").removeClass("current");
// show current tab
$("#" + contentname).show();
$(this).parent().addClass("current");
});
$('#tabs a.remove').live('click', function() {
// Get the tab name
var tabid = $(this).parent().find(".tab").attr("id");
// remove tab and related content
var contentname = tabid + "_content";
$("#" + contentname).remove();
$(this).parent().remove();
});
此代码使用 live() 方法,live 方法在新的 jquery 版本中已更改。 你可以像这样使用 on() 方法。
$('body').on('click','#tabs a.tab' function() {
// Get the tab name
var contentname = $(this).attr("id") + "_content";
// hide all other tabs
$("#content p").hide();
$("#tabs li").removeClass("current");
// show current tab
$("#" + contentname).show();
$(this).parent().addClass("current");
});
$('body').on('click','#tabs a.remove' function() {
// Get the tab name
var tabid = $(this).parent().find(".tab").attr("id");
// remove tab and related content
var contentname = tabid + "_content";
$("#" + contentname).remove();
$(this).parent().remove();
});
关于jquery - 如何使用动态内容动态添加选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17092002/