2016-11-03 5 views
0

ich eine einfache dynamische Tabbed Galerie auf Seite B habe mit diesem Code:jQuery - Anbindung an Seite mit Datenattribut

$('ul.tabs li').click(function(){ 
    event.preventDefault(); 

    var tab_id = $(this).attr('data-tab'); 

    $('ul.tabs li > figcaption').removeClass('current'); 
    $('.tab-content').removeClass('current'); 

    $(this).find('figcaption').addClass('current'); 
    $("#"+tab_id).addClass('current'); 
}); 

Angenommen, ich habe einen Link auf Seite A, die ich mit der Seite B verknüpfen möchte entsprechende Registerkarte auf Seite B aktiv. Wie würde ich das machen? Ich habe versucht, Datenattribute in href Tags zu erforschen, und ich bin so verwirrt.

Danke!

+2

die Registerkarte in der Hash-Put, wie 'page_b .html # tab1'. Dann kann das Skript auf Seite B 'window.location.hash' erhalten und dieses zur aktuellen Registerkarte machen. – Barmar

+0

Siehe http://stackoverflow.com/questions/33361536/change-url-of-the-windows-for-every-different-tab/33362303#33362303 – guest271314

+0

Dies ist der Code, der bestimmt, was aktuell ist. $ (this) .find ('figcaption'). AddClass ('current'); $ ("#" + tab_id) .addClass ('current'); Sollte ich den Hash in eine Variable speichern? Ich bin irgendwie verloren, wie man das unter Beibehaltung der aktuellen Funktionalität implementiert. – massanisso

Antwort

0

Verwenden Sie den Seiten-Hash, um das anfängliche Register der Seite anzugeben. Also, wenn Sie tab3 angezeigt werden soll, verwenden Sie einen Link wie:

<a href="page_b.html#tab3">...</a> 

Auf Seite B, überprüfen Sie für die Hash bei Ladezeit der Seite:

$(document.ready(function() { 
    var hash = window.location.hash; 
    if (hash) { 
     $('ul.tabs li > figcaption, .tab-content').removeClass('current'); 
     $(hash).addClass('current'); 
     $('ul.tabs li[data-tab=' + hash.substr(1) +'] figcaption').addClass('current'); 
    } 
    ... 
}); 
+0

Arbeitete wie ein Zauber, danke! Ein neues Stück JavaScript, das in Zukunft hilfreich sein wird! – massanisso

Verwandte Themen