1

我想用不同的名称重命名每个选项卡。它显示选项卡 1、选项卡 2.... 等。

$(function() {
    var total_tabs = 0;

    // initialize first tab
    total_tabs++;
    addtab(total_tabs);

    $("#addtab, #litab").click(function() {
        total_tabs++;
        $("#tabcontent p").hide();
        addtab(total_tabs);
        return false;
    });

    function addtab(count) {
        var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
        $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab '+count+'&nbsp;&nbsp;'+closetab+'</li>');
        $("#tabcontent").append('<p id="c'+count+'">Tab Content '+count+'</p>');

        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");

        $("#t"+count).bind("click", function() {
            $("#tabul li").removeClass("ctab");
            $("#t"+count).addClass("ctab");
            $("#tabcontent p").hide();
            $("#c"+count).fadeIn('slow');
        });

        $("#close"+count).bind("click", function() {
            // activate the previous tab
            $("#tabul li").removeClass("ctab");
            $("#tabcontent p").hide();
            $(this).parent().prev().addClass("ctab");
            $("#c"+count).prev().fadeIn('slow');

            $(this).parent().remove();
            $("#c"+count).remove();
            return false;
        });
    }
});

如何为我创建的每个选项卡添加重命名功能。我可以使用弹出框重命名选项卡吗？

我想用 GUI 系统重命名它，就像下面的链接。

http://demo.superdit.com/jquery/dynamic_tab.html

我想在那里重命名它。（通过使用弹出框或其他东西）

谢谢...

4

1 回答 1

1

尝试这个

function addtab(count, tabName) {
    var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
    $("#tabul").append('<li id="t'+count+'" class="ntabs">'+tabName+'&nbsp;&nbsp;'+closetab+'</li>');
    $("#tabcontent").append('<p id="c'+count+'">Tab Content '+count+'</p>');

    $("#tabul li").removeClass("ctab");
    $("#t"+count).addClass("ctab");

    $("#t"+count).bind("click", function() {
        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");
        $("#tabcontent p").hide();
        $("#c"+count).fadeIn('slow');
    });

    $("#close"+count).bind("click", function() {
        // activate the previous tab
        $("#tabul li").removeClass("ctab");
        $("#tabcontent p").hide();
        $(this).parent().prev().addClass("ctab");
        $("#c"+count).prev().fadeIn('slow');

        $(this).parent().remove();
        $("#c"+count).remove();
        return false;
    });
}
});

这是你的功能，只有两个变化。首先，我在函数中添加了一个额外的参数tabName，表示选项卡的名称。

function addtab(count, tabName)

这意味着您现在将像这样调用函数addTab(1, "Awesome tab name")

二、我改了这条线

 $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab '+count+'&nbsp;&nbsp;'+closetab+'</li>');

至

 $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab '+count+'&nbsp;&nbsp;'+closetab+'</li>');

最初，选项卡名称设置为Tab 1，其中 1 是count参数 ( Tab '+count+') 的值。现在，选项卡名称将是您在调用函数时为其指定的名称。

[编辑]对于标签重命名，你可以试试这个版本：

function addtab(count, tabName) {
    var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
    $("#tabul").append('<li id="t'+count+'" class="ntabs"><span id="title' + count + '">'+tabName+'</span>&nbsp;&nbsp;'+closetab+'</li>');
    $("#tabcontent").append('<p id="c'+count+'">Tab Content '+count+'</p>');

    $("#tabul li").removeClass("ctab");
    $("#t"+count).addClass("ctab");

    $("#t"+count).bind("click", function() {
        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");
        $("#tabcontent p").hide();
        $("#c"+count).fadeIn('slow');
    });

    $("#span"+count).bind("click", function() {
        var newTitle = prompt("Enter the new title","");
        if (newTitle && newTitle !== "") {
            $(this).innerText = newTitle;
        }
    });


    $("#close"+count).bind("click", function() {
        // activate the previous tab
        $("#tabul li").removeClass("ctab");
        $("#tabcontent p").hide();
        $(this).parent().prev().addClass("ctab");
        $("#c"+count).prev().fadeIn('slow');

        $(this).parent().remove();
        $("#c"+count).remove();
        return false;
    });
}
});

首先，我将选项卡标题放在一个单独的元素中，aspan $("#tabul").append('<li id="t'+count+'" class="ntabs"><span id="title' + count + '">'+tabName+'</span>&nbsp;&nbsp;'+closetab+'</li>');

然后我制作了标题以显示一个 javascript 提示框，要求您输入标题并将跨度的文本设置为给定值

$("#span"+count).bind("click", function() {
        var newTitle = prompt("Enter the new title","");
        if (newTitle && newTitle !== "") {
            $(this).innerText = newTitle;
        }
    });

我不确定它是否会 100% 工作，因为我不是 jQuery 用户，但它应该让您了解它是如何完成的

于 2012-10-17T10:53:09.320 回答