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;
    });
}
});

それはあなたの機能であり、変更は 2 つだけです。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;
    });
}
});

まず、タブのタイトルを別の要素に配置しました。span $("#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;
        }
    });

私は jQuery ユーザーではないので、100% うまくいくかどうかはわかりませんが、それがどのように行われるかについての基本的なアイデアを提供するはずです。

于 2012-10-17T10:53:09.320 に答える