Comment utiliser JavaScript pour accéder à différents onglets sur la même page

JavaScript est un langage de programmation largement utilisé dans le développement front-end, qui contient de nombreuses fonctions et techniques très utiles pour les applications WEB. Dans divers scénarios d'application, JavaScript peut améliorer l'interaction et l'expérience utilisateur. Dans cet article, nous explorerons une technique courante, qui consiste à utiliser JavaScript pour accéder à différents onglets sur la même page.

Avec le développement des applications Web, la technologie front-end se développe également constamment, offrant une expérience utilisateur de mieux en mieux. Dans les applications Web, les onglets constituent un élément interactif très important, permettant aux utilisateurs de basculer rapidement entre différentes pages fonctionnelles. Il est très utile de passer d'une page à l'autre et de conserver l'état précédent. À ce stade, il devient nécessaire de passer à l'onglet spécifié.

Nous utilisons plusieurs méthodes différentes pour passer d'un onglet à l'autre sur la même page.

1. Utiliser le hachage d'URL

Tout d'abord, nous pouvons utiliser le hachage (#) dans l'URL du navigateur pour passer d'un onglet à l'autre sur la même page. Ajoutez un cadre de hachage au lien de la page comme suit : http://www.example.com/#tab1 ，其中 tab1 est un identifiant d'onglet sélectionné. Dans le même temps, nous devons également détecter les événements de changement de hachage dans le code JavaScript de la page afin de mettre à jour l'état de l'onglet et d'afficher le contenu. L'implémentation du code de cette méthode est la suivante :

// 获取所有选项卡和内容区域
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');
    }
  }
});

2. Utilisez la programmation JavaScript pour implémenter

La deuxième méthode consiste à l'implémenter en écrivant du code JavaScript et en ajoutant un attribut personnalisé sur l'onglet auquel vous souhaitez accéder, tel que des données. -tab, Ensuite, utilisez-le simplement en JavaScript. Le code est implémenté comme suit :

// 获取所有选项卡和内容区域
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');
      }
    }
  });
}

3. Utilisez jQuery

La troisième méthode consiste à utiliser jQuery, qui fournit un ensemble de fonctions très utiles pour simplifier les opérations DOM et la liaison d'événements. En utilisant jQuery, nous pouvons sauter sur l'événement click de l'onglet. L'implémentation du code est la suivante :

// 获取所有选项卡和内容区域
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');
});

Peu importe la méthode utilisée, elles peuvent nous aider à passer d'un onglet à l'autre sur la même page. Bien entendu, le code ci-dessus ne fournit qu'une méthode de mise en œuvre. Pour différents scénarios et besoins, des ajustements et des modifications plus détaillés peuvent être nécessaires pour des situations spécifiques. Dans le développement réel, nous devons choisir la solution la mieux adaptée aux besoins actuels, prêter attention à la lisibilité et à la maintenabilité du code, et finalement obtenir un code efficace, robuste et concis.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!