Exemple de partage de code pour implémenter un délai de commutation lorsque la souris js passe par l'onglet onglet-js tutoriel-php.cn

Exemple de partage de code pour implémenter un délai de commutation lorsque la souris js passe par l'onglet onglet

黄舟

Libérer： 2017-03-25 14:43:05

original

1397 Les gens l'ont consulté

Cet article présente principalement en détail l'effet de délai de commutation de js lorsque la souris passe sur l'onglet. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

J'ai découvert par hasard. cet effet lors de la navigation sur le Web. Lorsque la souris glisse sur l'onglet par inadvertance, elle ne basculera pas lorsque la souris restera dessus pendant un certain temps.

Personnellement, je pense que l'expérience utilisateur est bonne. Les avantages sont : 1. Lorsque l'utilisateur glisse simplement sur l'onglet et n'a pas besoin de changer d'onglet, et si le changement d'onglet nécessite de demander des données, des requêtes asynchrones inutiles seront évité ; 2. Éviter La page change et saute lorsque l'utilisateur n'en a pas besoin, affectant l'expérience utilisateur.

J'ai vérifié plusieurs méthodes en ligne et j'ai trouvé que la méthode suivante est plus concise et efficace. Organisé pour référence future.

Le point clé est ce code js : le principe est de régler le timer lors du passage en survol, de retarder l'exécution de la méthode de commutation, et d'effacer le timer en partant. Lorsque le temps de survol est inférieur au temps de retard, la minuterie sera effacée et la méthode de commutation ne sera pas exécutée. La commutation ne se produira que lorsque le temps de maintien sera supérieur au temps de retard. Cela peut effectivement éviter de faire glisser la languette pour déclencher l'événement de commutation .

Copier le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery.1.11.3.min.js"></script>
    <script>
      $(function() {
        var t_li = $(".tab")
        var c_li = $(".tab-content p")
        t_li.hover(function() {
          var i = t_li.index($(this));

          function way() {
            t_li.removeClass("cur").eq(i).addClass("cur");
            c_li.hide().eq(i).show();
          }
          timer = setTimeout(way, 500);
        }, function() {
          clearTimeout(timer);
        });
      });
    </script>
    <style>
      .head {
        width: 300px;
        height: 50px;
        border: 1px dashed #ccc;
      }
      
      .tab {
        width: 50%;
        float: left;
        line-height: 50px;
        cursor: pointer;
      }
      
      .cur {
        border-bottom: 2px solid red;
      }
    </style>
  </head>
  <body>
    <p style="width: 300px;margin-left: 300px;" class="main">
      <p class="head">
        <p class="tab cur">tab1</p>
        <p class="tab">tab2</p>
      </p>
      <p class="tab-content">
        <p>tab1的内容<br>tab1的内容<br>tab1的内容<br></p>
        <p style="display: none;">tab2的内容<br>tab2的内容<br>tab2的内容<br></p>
      </p>
    </p>
  </body>

</html>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Exemple de partage de code pour implémenter un délai de commutation lorsque la souris js passe par l'onglet onglet