JavaScript를 사용하여 동일한 페이지의 다른 탭으로 이동하는 방법

// 获取所有选项卡和内容区域
var tabs = document.querySelectorAll('.tab-item');
var contents = document.querySelectorAll('.content-item');

// 监听 hash 的改变
window.addEventListener('hashchange', function () {
  // 获取当前的 hash
  var hash = window.location.hash;

  // 遍历所有的选项卡，根据当前 hash 进行选中
  for (var i = 0; i < tabs.length; i++) {
    var tab = tabs[i];
    var href = tab.getAttribute('href');

    if (href === hash) {
      tab.classList.add('active');
    } else {
      tab.classList.remove('active');
    }
  }

  // 遍历所有的内容区域，根据选中的选项卡进行显示
  for (var i = 0; i < contents.length; i++) {
    var content = contents[i];
    var id = content.getAttribute('id');

    if ('#' + id === hash) {
      content.classList.add('active');
    } else {
      content.classList.remove('active');
    }
  }
});

// 获取所有选项卡和内容区域
var tabs = document.querySelectorAll('.tab-item');
var contents = document.querySelectorAll('.content-item');

// 给选项卡添加 click 事件
for (var i = 0; i < tabs.length; i++) {
  var tab = tabs[i];
  var target = tab.getAttribute('data-tab');

  tab.addEventListener('click', function (e) {
    // 阻止默认跳转事件
    e.preventDefault();

    // 遍历所有的选项卡，根据 data-tab 进行选中
    for (var i = 0; i < tabs.length; i++) {
      var tab = tabs[i];
      var href = tab.getAttribute('data-tab');

      if (href === target) {
        tab.classList.add('active');
      } else {
        tab.classList.remove('active');
      }
    }

    // 遍历所有的内容区域，根据选中的选项卡进行显示
    for (var i = 0; i < contents.length; i++) {
      var content = contents[i];
      var id = content.getAttribute('data-tab');

      if (id === target) {
        content.classList.add('active');
      } else {
        content.classList.remove('active');
      }
    }
  });
}

// 获取所有选项卡和内容区域
var $tabs = $('.tab-item');
var $contents = $('.content-item');

// 给选项卡添加 click 事件
$tabs.on('click', function (e) {
  // 阻止默认跳转事件
  e.preventDefault();

  // 获取当前选项卡和内容区域
  var $tab = $(this);
  var target = $tab.attr('href');
  var $content = $(target);

  // 切换选项卡和内容区域的 active 状态
  $tab.addClass('active').siblings().removeClass('active');
  $content.addClass('active').siblings().removeClass('active');
});