Maison > interface Web > js tutoriel > 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 ?

藏色散人
Libérer: 2018-08-15 14:23:46
original
14482 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal