Inverser la section dans la page en cliquant sur le lien avec le hachage

Question

J'ai mes actions de bascule tout mis en place et fonctionne très bien. Je voudrais ajouter une fonctionnalité où si vous deviez aller à example.com/#section, cette section aurait cette section spécifique ouverte. Je pense que je dois utiliser location.hash d'une façon ou d'une autre, je ne suis pas sûr de savoir comment l'appliquer à ce que j'ai déjà.

jQuery

$(document).ready(function(){ 
$('ul.tabs li').click(function(){ 
    var tab_id = $(this).attr('data-tab'); 

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

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

HTML

 <ul class="press-toggle tabs"> 
     <li id="news-release" data-tab="tab-1" class="tab-link current">News Releases</li> 
     <li id="events-presentations" data-tab="tab-2" class="tab-link">Events &amp; Presentations</li> 
     <li id="media" data-tab="tab-3" class="tab-link">Media Coverage</li> 
     <li id="publications" data-tab="tab-4" class="tab-link">Publications</li> 
     </ul> 
    <div class="press-tab-content current" id="tab-1"> 
     NEWS RELEASES CONTENT HERE 
    </div> 
    <div class="press-tab-content" id="tab-2"> 
     EVENTS & PRESENTATIONS CONTENT HERE 
    </div> 
    <div class="press-tab-content" id="tab-3"> 
     MEDIA COVERAGE CONTENT HERE 
    </div> 
    <div class="press-tab-content" id="tab-4"> 
     PUBLICATION CONTENT HERE 
    </div> 

Answer 1

var section = window.location.hash.substr(1); // get section after hash from url .. your url should be something like website.com#tab-1 
$('ul.tabs li').filter(function(){   // use .filter to find the li which data-tab equal to this section 
    return $(this).attr('data-tab') == section; 
}).click();         // trigger click it 

Remarque: votre code Je préfère utiliser à la place .on('click' , function(){ de .click(function(){

Et vous pouvez rendre votre code ressemble à ceci

$(document).ready(function(){ 
    var section = window.location.hash.substr(1); 
    $('ul.tabs li').click(function(){ // click 
    var tab_id = $(this).attr('data-tab'); 

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

    $(this).addClass('current'); 
    $("#"+tab_id).addClass('current'); 
    }).filter(function(){  // filter 
     return $(this).attr('data-tab') == section; 
    }).click();    //trigger click 
}); 

Note 2: si .attr('data-tab') fonctionne pas, vous pouvez utiliser à la place .data('tab')