Jquery选项卡基于URL添加/切换类

<ul class="tab-nav">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab-content">
  <div id="tab1">Content 1</div>
  <div id="tab2">Content 2</div>
  <div id="tab3">Content 3</div>
</div>

$(document).ready(function() {
  $('.tab-nav a').click(function(e) {
    e.preventDefault(); // 阻止默认的链接跳转行为
    var tabId = $(this).attr('href'); // 获取目标选项卡的ID
    $('.tab-content div').hide(); // 隐藏所有选项卡内容
    $(tabId).show(); // 显示目标选项卡内容
  });
});

$(document).ready(function() {
  // 初始加载时，根据URL中的锚点值显示对应的选项卡
  var hash = window.location.hash;
  if (hash) {
    $('.tab-content div').hide();
    $(hash).show();
  }

  $('.tab-nav a').click(function(e) {
    e.preventDefault();
    var tabId = $(this).attr('href');
    $('.tab-content div').hide();
    $(tabId).show();

    // 点击选项卡时，修改URL中的锚点值
    window.location.hash = tabId;
  });
});