单击带哈希的 link 时切换页面中的部分

Question

我已经设置好我的切换动作并且工作正常。我想添加一些功能，如果您转到 example.com/#section，该页面将打开该特定部分。我想我需要以某种方式使用 location.hash，我只是不确定如何将它应用到我已有的东西上。

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

Note: On your code I prefer to use .on('click' , function(){ instead of .click(function(){

并且：你可以让你的代码看起来像这样

$(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 : if .attr('data-tab') not working you can use .data('tab') instead

单击带哈希的 link 时切换页面中的部分

Toggle section in page when clicking link with hash

hash

jquery

toggle