Rumah hujung hadapan web tutorial js 使用JQuery和CSS模拟超链接的用户单击事件的实现代码_jquery

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

May 16, 2016 pm 05:53 PM
hiperpautan

在正式开始本文之前,先来简单介绍下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是什么呢?然后想不出来然后了。
最后祝大家敲代码愉快。

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Selesaikan masalah hiperpautan tidak boleh dibuka Selesaikan masalah hiperpautan tidak boleh dibuka Feb 18, 2024 am 09:57 AM

Bagaimana untuk menyelesaikan masalah hiperpautan tidak boleh dibuka Dengan perkembangan pesat Internet, hiperpautan telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian kita. Kami sering melihat dan menggunakan hiperpautan pada pelbagai platform seperti halaman web, e-mel dan media sosial. Walau bagaimanapun, kadangkala kita mungkin menghadapi masalah dengan hiperpautan tidak dibuka, yang membuatkan kita keliru dan kecewa. Dalam artikel ini, kami akan membincangkan sebab mengapa hiperpautan tidak boleh dibuka dan penyelesaiannya, dengan harapan dapat membantu anda menyelesaikan masalah ini. Mula-mula, mari kita fahami kemungkinan sebab hiperpautan tidak boleh dibuka. Berikut adalah beberapa perkara biasa

Apakah yang perlu saya lakukan jika WPS tidak dapat membuka hiperpautan? Penyelesaian kepada hiperpautan WPS tidak dibuka Apakah yang perlu saya lakukan jika WPS tidak dapat membuka hiperpautan? Penyelesaian kepada hiperpautan WPS tidak dibuka Mar 13, 2024 pm 08:40 PM

Apabila ramai rakan kami menggunakan WPS untuk mengedit kandungan, mereka kadangkala menambah hiperpautan pada teks tertentu Baru-baru ini, beberapa rakan telah melaporkan bahawa hiperpautan WPS tidak boleh dibuka dan tidak boleh diklik untuk mengakses selepas menggunakan banyak kaedah. Dalam tutorial perisian ini, editor akan berkongsi penyelesaian khusus, dengan harapan dapat membantu majoriti pengguna. Penyelesaian untuk hiperpautan WPS yang tidak boleh dibuka: Kaedah 1: Gerakkan tetikus ke atas hiperpautan untuk melihat sama ada ia boleh diklik 1. Buka perisian, klik "Fail" di penjuru kiri sebelah atas halaman, dan pilih "Pilihan". dalam menu di bawah. 2. Selepas memasuki antara muka baharu, klik "Edit&rdq" di sebelah kiri

Tidak boleh membuka hiperpautan dalam dokumen word Tidak boleh membuka hiperpautan dalam dokumen word Feb 18, 2024 pm 06:10 PM

Dalam beberapa tahun kebelakangan ini, dengan perkembangan berterusan teknologi rangkaian, kehidupan kita tidak dapat dipisahkan daripada pelbagai alat digital dan Internet. Semasa memproses dokumen, terutamanya dalam penulisan, kita sering menggunakan dokumen perkataan. Namun, kadangkala kita mungkin menghadapi masalah yang sukar, iaitu hiperpautan dalam dokumen perkataan tidak boleh dibuka. Isu ini akan dibincangkan di bawah. Pertama sekali, kita perlu menjelaskan bahawa hiperpautan merujuk kepada pautan yang ditambahkan dalam dokumen perkataan ke dokumen lain, halaman web, direktori, penanda halaman, dsb. Apabila kita klik pada pautan ini, saya

Mengapa hiperpautan tidak boleh dibuka? Mengapa hiperpautan tidak boleh dibuka? Feb 22, 2024 pm 03:33 PM

Sebagai salah satu elemen biasa dalam halaman web, hiperpautan sering digunakan untuk menunjuk ke halaman web lain, fail atau lokasi tertentu. Walau bagaimanapun, kadangkala kita menghadapi situasi di mana hiperpautan tidak boleh dibuka, yang boleh disebabkan oleh beberapa sebab. Pertama sekali, kegagalan untuk membuka hiperpautan mungkin disebabkan oleh alamat pautan yang salah. Apabila membuat hiperpautan, kita perlu memastikan bahawa alamat pautan adalah betul. Jika alamat mengandungi aksara atau ruang khas, pautan mungkin tidak dibuka. Di samping itu, jika alamat pautan berubah atau fail sasaran telah dialihkan atau dipadamkan, pautan tidak boleh dibuka.

Outlook membeku apabila memasukkan hiperpautan Outlook membeku apabila memasukkan hiperpautan Feb 19, 2024 pm 03:00 PM

Jika anda menghadapi isu beku semasa memasukkan hiperpautan ke dalam Outlook, ia mungkin disebabkan oleh sambungan rangkaian yang tidak stabil, versi Outlook lama, gangguan daripada perisian antivirus atau konflik tambahan. Faktor-faktor ini boleh menyebabkan Outlook gagal mengendalikan operasi hiperpautan dengan betul. Betulkan Outlook terhenti apabila memasukkan hiperpautan Gunakan pembetulan berikut untuk membetulkan Outlook terhenti apabila memasukkan hiperpautan: Semak alat tambah yang dipasang Kemas kini Outlook Lumpuhkan sementara perisian antivirus anda dan kemudian cuba buat profil pengguna baharu Betulkan apl Office Program Nyahpasang dan pasang semula Office Mari mulakan. 1] Semak add-in yang dipasang Mungkin add-in yang dipasang dalam Outlook menyebabkan masalah.

Bagaimana untuk menggantikan alamat URL dalam rentetan dengan hiperpautan dalam PHP menggunakan ungkapan biasa Bagaimana untuk menggantikan alamat URL dalam rentetan dengan hiperpautan dalam PHP menggunakan ungkapan biasa Jun 22, 2023 pm 02:22 PM

Dengan populariti Internet, orang ramai semakin tidak dapat dipisahkan daripada Internet dalam kehidupan seharian mereka, dan mereka semakin memerlukan sokongan halaman web. Dalam halaman web, operasi yang sangat biasa adalah untuk menukar alamat URL menjadi hiperpautan. Dalam PHP, kita boleh menggunakan ungkapan biasa untuk mencapai operasi ini. Seterusnya, mari kita lihat kaedah pelaksanaan khusus. 1. Gunakan ungkapan biasa untuk memadankan URL Sebelum menggunakan ungkapan biasa untuk menggantikan URL dengan hiperpautan, kita perlu menggunakan ungkapan biasa untuk memadankan URL. Peraturan padanan khusus adalah seperti berikut: $patter

Tutorial tentang cara memasukkan hiperpautan ke dalam slaid PPT untuk mencapai main balik melangkau Tutorial tentang cara memasukkan hiperpautan ke dalam slaid PPT untuk mencapai main balik melangkau Mar 26, 2024 pm 02:51 PM

1. Buka PPT, atau buat PPT yang memerlukan hiperpautan. 2. Pilih kandungan yang perlu dimasukkan ke dalam hyperlink Sebagai contoh, kami memilih perkataan "flower" dan memasukkan hyperlink ke dalamnya. 3. Klik Sisipkan dalam bar menu, cari Hiperpautan dalam lajur Pautan, dan klik hiperpautan. 4. Tetingkap akan muncul, dengan pautan di sebelah kiri untuk memilih lokasi dalam dokumen ini, dan kemudian setiap slaid dalam PPT akan muncul. 5. Anda boleh memilih slaid yang ingin anda pautkan, klik sekali, dan mod pratonton slaid ini akan muncul di sebelah kanan. 6. Dengan hyperlink, warna fon akan berubah. Kami hanya perlu klik pada perkataan hiperpautan semasa memainkan slaid, dan slaid akan dimainkan secara automatik ke slaid yang kami pautkan.

Adakah anda tahu bagaimana untuk menyediakan hiperpautan ppt? Adakah anda tahu bagaimana untuk menyediakan hiperpautan ppt? Mar 20, 2024 am 11:40 AM

Hiperpautan PPT boleh pergi dengan cepat ke tapak web tertentu atau membuka fail tertentu, atau melompat terus ke halaman tertentu, meningkatkan kecekapan dan menjadikan main balik lebih fleksibel. Jadi, bagaimana kita menyediakan hiperpautan? Di sini saya akan berkongsi dengan anda bagaimana untuk menyediakan hiperpautan dalam ppt. Seterusnya, pembelajaran akan bermula Adakah anda bersedia, pelajar? Langkah-langkahnya adalah seperti berikut: 1. Pertama, kita perlu membuka slaid Microsoft PowerPoint pada komputer kemudian, kita masukkan kandungan teks yang ingin kita tetapkan hyperlink dalam slaid. (Seperti yang ditunjukkan dalam gambar) 2. Seterusnya, kami menggunakan tetikus untuk memilih kandungan teks yang ingin kami tetapkan hyperlink kemudian, kami klik [butang kanan] tetikus dan pilih pilihan [Hyperlink] dalam [drop -menu bawah].

See all articles