Maison interface Web js tutoriel 使用JQuery和CSS模拟超链接的用户单击事件的实现代码_jquery

使用JQuery和CSS模拟超链接的用户单击事件的实现代码_jquery

May 16, 2016 pm 05:53 PM
超链接

在正式开始本文之前,先来简单介绍下HTML的标签:使用标签,我们可以在HTML页面上定义锚(anchor),锚有两种用法:
通过使用 href 属性,创建指向另外一个文档的链接(或超链接)
通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)
本文的内容与锚的第一种用法有关。

复制代码 代码如下:













脚本之家




点击我,将调用以上超链接的单击事件





以上代码的运行效果如下图所示:

点击超链接,页面可以正常跳转;但点击标签,页面却不可以跳转;以上,在IE8和Chrome里都无法跳转(其他浏览器未测试)。所以,接下来要实现的效果,就是在点击标签的时候让页面跳转(也就是在调用超链接的单击事件时,让页面跳转),且写的代码要少,且最好是在一个地方处理,一个项目不可能就一个页面,一个页面不可能就一个超链接,且不能做的太死,怎么说锚的另一个作用是书签,别链接是可以跳转了,锚的书签作用被屏蔽了,且……。

Main.css
复制代码 代码如下:

a.forward
{
}

Main.js
复制代码 代码如下:

///
$(document).ready(function () {
// 使超链接支持click事件,方便JavaScript调用
$('a.forward').click(function () {
location.href = $(this)[0].href;
return false;
});
});

修改过后的页面源码如下:
复制代码 代码如下:














脚本之家




点击我,将调用以上超链接的单击事件





运行一下(截图略),点击标签,页面完美跳转,(*^__^*) 嘻嘻好了,最后来总结一下,模拟超链接的用户单击事件,我们需要做的就是:
导入外部CSS文件,Main.css,导入外部JavaScript文件Main.js(必须在导入JQuery文件之后导入);
给超链接添加CSS类“forward”;
然后3是什么呢?然后想不出来然后了。
最后祝大家敲代码愉快。

首发:博客园->剑过不留痕

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Résoudre le problème de l'impossibilité d'ouvrir les hyperliens Résoudre le problème de l'impossibilité d'ouvrir les hyperliens Feb 18, 2024 am 09:57 AM

Comment résoudre le problème de l'impossibilité d'ouvrir les hyperliens Avec le développement rapide d'Internet, les hyperliens sont devenus un élément indispensable de notre vie quotidienne. Nous voyons et utilisons souvent des hyperliens sur diverses plateformes telles que des pages Web, des e-mails et des réseaux sociaux. Cependant, nous pouvons parfois rencontrer des problèmes avec des hyperliens qui ne s'ouvrent pas, ce qui nous rend confus et frustrés. Dans cet article, nous aborderons les raisons pour lesquelles les hyperliens ne peuvent pas être ouverts et leurs solutions, dans l'espoir de vous aider à résoudre ce problème. Tout d’abord, comprenons les raisons possibles pour lesquelles les hyperliens ne peuvent pas être ouverts. Voici quelques exemples courants

Que dois-je faire si WPS ne parvient pas à ouvrir un lien hypertexte ? Solution au lien hypertexte WPS qui ne s'ouvre pas Que dois-je faire si WPS ne parvient pas à ouvrir un lien hypertexte ? Solution au lien hypertexte WPS qui ne s'ouvre pas Mar 13, 2024 pm 08:40 PM

Lorsque beaucoup de nos amis utilisent WPS pour modifier du contenu, ils ajoutent parfois des hyperliens vers un texte spécifique. Récemment, certains amis ont signalé que les hyperliens WPS ne peuvent pas être ouverts et il est impossible de cliquer pour y accéder après avoir utilisé de nombreuses méthodes. Dans ce tutoriel logiciel, l'éditeur partagera les solutions spécifiques, en espérant aider la majorité des utilisateurs. Solutions pour les hyperliens WPS qui ne peuvent pas être ouverts : Méthode 1 : Déplacez la souris sur le lien hypertexte pour voir s'il devient cliquable 1. Ouvrez le logiciel, cliquez sur « Fichier » dans le coin supérieur gauche de la page et sélectionnez « Options ». dans le menu ci-dessous. 2. Après être entré dans la nouvelle interface, cliquez sur « Modifier&rdq » à gauche

Impossible d'ouvrir le lien hypertexte dans un document Word Impossible d'ouvrir le lien hypertexte dans un document Word Feb 18, 2024 pm 06:10 PM

Ces dernières années, avec le développement continu de la technologie des réseaux, nos vies sont indissociables des divers outils numériques et d'Internet. Lors du traitement de documents, notamment par écrit, nous utilisons souvent des documents Word. Cependant, nous pouvons parfois rencontrer un problème difficile, c'est-à-dire que le lien hypertexte dans le document Word ne peut pas être ouvert. Cette question sera discutée ci-dessous. Tout d'abord, nous devons préciser que les hyperliens font référence à des liens ajoutés dans des documents Word vers d'autres documents, pages Web, répertoires, signets, etc. Lorsque nous cliquons sur ces liens, je

Pourquoi le lien hypertexte ne peut-il pas être ouvert ? Pourquoi le lien hypertexte ne peut-il pas être ouvert ? Feb 22, 2024 pm 03:33 PM

En tant qu'élément commun des pages Web, les hyperliens sont souvent utilisés pour pointer vers d'autres pages Web, fichiers ou emplacements spécifiques. Cependant, nous rencontrons parfois une situation dans laquelle un lien hypertexte ne peut pas être ouvert, ce qui peut être dû à plusieurs raisons. Premièrement, l’échec de l’ouverture d’un lien hypertexte peut être dû à une adresse de lien incorrecte. Lors de la création d'un lien hypertexte, nous devons nous assurer que l'adresse du lien est correcte. Si l'adresse contient des caractères spéciaux ou des espaces, le lien risque de ne pas s'ouvrir. De plus, si l'adresse du lien change ou si le fichier cible a été déplacé ou supprimé, le lien ne sera pas ouvert.

Outlook se bloque lors de l'insertion d'un lien hypertexte Outlook se bloque lors de l'insertion d'un lien hypertexte Feb 19, 2024 pm 03:00 PM

Si vous rencontrez des problèmes de blocage lors de l'insertion de liens hypertexte dans Outlook, cela peut être dû à des connexions réseau instables, à d'anciennes versions d'Outlook, à des interférences provenant d'un logiciel antivirus ou à des conflits de compléments. Ces facteurs peuvent empêcher Outlook de gérer correctement les opérations de liens hypertexte. Corriger le blocage d'Outlook lors de l'insertion d'hyperliens Utilisez les correctifs suivants pour corriger le blocage d'Outlook lors de l'insertion d'hyperliens : Vérifiez les compléments installés Mettre à jour Outlook Désactivez temporairement votre logiciel antivirus, puis essayez de créer un nouveau profil utilisateur Réparer le programme des applications Office Désinstaller et réinstaller Office Commençons. 1] Vérifiez les compléments installés. Il se peut qu'un complément installé dans Outlook soit à l'origine du problème.

Comment remplacer une adresse URL dans une chaîne par un lien hypertexte en PHP à l'aide d'expressions régulières Comment remplacer une adresse URL dans une chaîne par un lien hypertexte en PHP à l'aide d'expressions régulières Jun 22, 2023 pm 02:22 PM

Avec la popularité d’Internet, les gens sont de plus en plus inséparables d’Internet dans leur vie quotidienne et ont de plus en plus besoin du soutien des pages Web. Dans les pages Web, une opération très courante consiste à convertir l’adresse URL en lien hypertexte. En PHP, on peut utiliser des expressions régulières pour réaliser cette opération. Examinons ensuite la méthode de mise en œuvre spécifique. 1. Utilisez des expressions régulières pour faire correspondre les URL. Avant d'utiliser des expressions régulières pour remplacer les URL par des hyperliens, nous devons utiliser des expressions régulières pour faire correspondre les URL. Les règles de correspondance spécifiques sont les suivantes : $patter

Tutoriel sur la façon d'insérer des hyperliens dans les diapositives PPT pour sauter la lecture Tutoriel sur la façon d'insérer des hyperliens dans les diapositives PPT pour sauter la lecture Mar 26, 2024 pm 02:51 PM

1. Ouvrez un PPT ou créez un PPT nécessitant des hyperliens. 2. Sélectionnez le contenu qui doit être inséré dans un lien hypertexte. Par exemple, nous sélectionnons le mot « fleur » et y insérons un lien hypertexte. 3. Cliquez sur Insérer dans la barre de menu, recherchez le lien hypertexte dans la colonne Lien et cliquez sur le lien hypertexte. 4. Une fenêtre apparaîtra, avec le lien sur la gauche pour sélectionner l'emplacement dans ce document, puis chaque diapositive du PPT apparaîtra. 5. Vous pouvez sélectionner la diapositive que vous souhaitez lier, cliquer une fois et le mode d'aperçu de cette diapositive apparaîtra sur la droite. 6. Avec le lien hypertexte, la couleur de la police changera. Il nous suffit de cliquer sur le mot hyperlien lors de la lecture de la diapositive, et la diapositive sera automatiquement lue sur la diapositive vers laquelle nous avons mentionné le lien.

Savez-vous comment mettre en place des hyperliens ppt ? Savez-vous comment mettre en place des hyperliens ppt ? Mar 20, 2024 am 11:40 AM

Les hyperliens PPT peuvent accéder rapidement à un site Web spécifié ou ouvrir un fichier spécifié, ou accéder directement à une certaine page, améliorant ainsi l'efficacité et rendant la lecture plus flexible. Alors, comment mettre en place des hyperliens ? Ici, je vais partager avec vous comment configurer des hyperliens en ppt. Ensuite, l’apprentissage est sur le point de commencer. Êtes-vous prêts, étudiants ? Les étapes sont les suivantes : 1. Tout d'abord, nous devons ouvrir la diapositive Microsoft PowerPoint sur l'ordinateur, puis saisir le contenu du texte pour lequel nous souhaitons définir un lien hypertexte dans la diapositive. (Comme le montre l'image) 2. Ensuite, nous utilisons la souris pour sélectionner le contenu du texte sur lequel nous voulons définir un lien hypertexte, puis nous cliquons sur le [bouton droit] de la souris et sélectionnons l'option [Lien hypertexte] dans le champ [Déposer". -Menu bas].

See all articles