jQuery simulieren, klicken Sie auf die Registerkarte mit der code-Ausführung

Den code unten, wenn ich Sie auf eine Registerkarte, mache ich einen post und zeigt das Ergebnis in der tab. In einigen Fällen möchte ich Kraft für die gewählte Registerkarte, aber nicht nur wählen Sie die Registerkarte, sondern wählen Sie die Registerkarte + führen Sie den code, der ausgeführt wird, wenn ich drauf klicke.

In meinem Beispiel, wie ich wählen Sie die zweite Registerkarte (jLikeToSet = 1) und führen Sie den code :

$.post('/Home/e2', function (data) {
        $('#tabs-2').html(data);
});

jQuery :

    var $tabs = $("#tabs").tabs();
    var jLikeToSet = 1
    $("#tabs").bind('tabsselect', function (event, ui) {
        switch (ui.index) {
            case 0:
                $.post('/Home/e1', function (data) {
                    $('#tabs-1').html(data);
                });
                break;
            case 1:
                $.post('/Home/e2', function (data) {
                    $('#tabs-2').html(data);
                });
                break;
            case 2:
                $.post('/Home/e3', function (data) {
                    $('#tabs-3').html(data);
                });
                break;
        }
    });

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Screen 1</a></li>
        <li><a href="#tabs-2">Screen 2</a></li>
        <li><a href="#tabs-3">Screen 3</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>

Wie kann ich dies tun ?

Dank,

Update1 :
Ich habe versucht diesen code verwenden :
$('#tabs').tabsClick(1); aber keine Arbeit, die Muster kommen von hier http://www.eduteka.org/ajax/tabs3/

InformationsquelleAutor Kris-I | 2011-03-31
  1. 6

    Wählen Sie programmgesteuert eine Registerkarte, rufen Sie diese Funktion mit jLikeToSet arg:

    function selectTab(jLikeToSet){
    $("#tabs").tabs( "select" , jLikeToSet);
}

    wenn diese Funktion ausgeführt wird, es ist, als wenn Sie manuell gewählt, so was in .bind('tabsselect' ausgeführt werden.

    • Dies ist viel sauberer als die, die ich gepostet haben. Ich war nicht bewusst, wählen Sie die option. +1
    • mit diesem code wähle ich die Registerkarte index in jLikeToset) aber nichts passiert wenn ich auf die Registerkarten klicken. Ich würde gerne, in einigen Fällen, legen Sie eine Registerkarte, und führen Sie die coede ... deine Lösung ist ok, aber ich muss in der Lage sein, um code auszuführen, wenn ich auf Register zu.
    • FYI, ich benutzt "e1","e2" ... kann aber sein, "aaaa", "bbbb", "azerty"
    • Wo ist die $.post ?
    • Als ich sagte in der Antwort, die Funktion zum auswählen einer Registerkarte führen zu dem gleichen Ergebnis wie die manuelle Auswahl; die Auslösung der tabsselect Fall, dass Sie sich definiert --> ausführen $.post für die ausgewählte Registerkarte. Versuchen Sie es.
    • Wie der jQuery-UI-1.8 die "select" - option ist veraltet und wird entfernt 1.9. Verwenden Sie die "aktive" statt wie folgt: $("#tabs").tabs("option", "active", tabIndex);

    InformationsquelleAutor manji
  2. 0

    Versuchen Sie, dieses Skript in das ready-Ereignis und nach die tabs erstellt werden:

    $('#tabs-' + (jLikeToSet + 1) + ' a').click();
    • es ist nicht nur in tabs-2, aber in der Registerkarte mit den index-store in jLikeToSet, in diesem Fall 1, aber kann 0 oder 2
    • Lösung geschrieben von Manji besser ist. Eine kleine änderung, die Sie würden tun müssen, ist, verwenden Sie es auf diese Weise: $("#tabs").tabs( "select" , jLikeToSet);
    InformationsquelleAutor Chandu
  3. 0

    Ich mich ändern würde, die jQuery für das folgende:

    $(document).ready(function() {
    var $tabs = $("#tabs").tabs();
    $('#tabs li a').click(function(){
        $.post('/Home/e'+location.hash.replace('#tabs-',''), function (data) {
            $(location.hash).html(data);
        });
    });
});
    InformationsquelleAutor Johnald
  4. 0

    Je nach Benutzer, kann es besser sein, zu geben, Ihre Registerkarten-Namen, so kann der Nutzer gehen direkt zu Ihnen, wie https://www.example.com#documents

    Dann können Sie Ihre html zu reflektieren, und machen das "klicken" einfacher

    <div id="tabs">
    <ul>
        <li><a id="documents_click" href="#documents">Documents</a></li>
        <li><a id="videos_click" href="#videos">Videos</a></li>
        <li><a id="profile_click" href="#profile">Profile</a></li>
    </ul>
    <div id="documents"></div>
    <div id="videos"></div>
    <div id="profile"></div>
</div>

    Also wählen Sie die Registerkarte Dokumente, alles, was Sie tun müssen, jQuery ist:

    $('#documents_click').click();
    InformationsquelleAutor brianlmerritt
Schreibe einen Kommentar