Maison  >  Article  >  interface Web  >  Comment utiliser js pour accéder au div spécifié après avoir cliqué sur une certaine partie de la page actuelle ?

Comment utiliser js pour accéder au div spécifié après avoir cliqué sur une certaine partie de la page actuelle ?

藏色散人
藏色散人original
2018-08-15 14:23:4614354parcourir

Dans le processus de construction d'un site Web, il est parfois nécessaire d'implémenter une telle fonction. Cliquer sur une certaine position avec la souris sur la page actuelle vous déplacera directement vers une autre position spécifiée sur la page actuelle. En fait, cette fonction n’est certainement pas difficile pour les programmeurs expérimentés, mais pour les novices, elle est difficile, principalement parce qu’ils ne savent pas par où commencer. Cet article vous présentera donc deux méthodes permettant à js d'accéder à la page pour spécifier la position du div.

1. Implémentation via un point d'ancrage html :
Si l'endroit sur lequel nous voulons cliquer pour sauter est un point d'ancrage html, c'est-à-dire cliquer sur un lien hypertexte de balise A pour sauter, nous pouvons changer le href de la balise A L'attribut pointe directement vers le div qui passe à la position spécifiée. L'exemple de code est le suivant :

<a href="#abc">点击跳转</a>
<div id="abc">将要跳转到这里</div>

Remarque : Cliquer sur le lien A ci-dessus fera défiler jusqu'au div avec id=" abc" sur la même page. Veuillez noter que l'identifiant du div qui saute à la position spécifiée est unique. La balise A pointe directement vers cet identifiant. N'oubliez pas d'ajouter le signe # devant l'identifiant.

2. En cliquant sur le bouton bouton :
Si l'endroit sur lequel nous voulons cliquer pour sauter est un bouton bouton, puisque le bouton ne peut pas ajouter de href, nous devons utiliser le code de saut js pour y parvenir, le code Un exemple est le suivant :

<script>
    function onTopClick() {
         window.location.hash = "#abc";
       }
    </script>
    <input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
    <div id="abc">js跳转到页面指定div位置</div>

Remarque : Comme mentionné ci-dessus, cliquer sur le bouton Soumettre fera défiler et passera au div avec id="abc" sur la même page. Le principe de ce code de page de saut de clic js est le suivant : chaque élément de la page reçoit un identifiant unique, cliquer sur le bouton de soumission déclenche l'événement de clic js, et js fait défiler et accède à l'élément via l'ID, window.location.hash = "#abc" fait référence au div positionné sur la page actuelle id="abc".

Ce qui précède sont deux méthodes simples pour implémenter des pages de saut locales dans les divs. Je pense que même les novices maîtriseront facilement les connaissances pertinentes après avoir lu l'introduction de cet article.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn