html klik untuk melompat ke halaman

HTML ialah salah satu bahasa teras​​untuk membina halaman web Ia membolehkan kami menambah pelbagai elemen pada halaman untuk mencapai kesan interaksi halaman yang kaya. Antaranya, mengklik untuk melompat ke halaman adalah kaedah interaksi yang sangat biasa dan digunakan secara meluas dalam pelbagai laman web dan aplikasi.

Dalam HTML, terdapat banyak cara untuk melompat ke halaman dengan klik, yang akan diperkenalkan satu persatu di bawah.

1. Gunakan hiperpautan

Lompat klik yang paling biasa ialah menggunakan teg hiperpautan , yang membolehkan kami menukar teks tertentu pada halaman Atau imej ditukar menjadi pautan, yang melompat ke halaman yang ditentukan apabila diklik. Sintaks

adalah seperti berikut:

<a href="目标页面地址">链接文本</a>

Antaranya, href ialah alamat sasaran pautan yang ditentukan, yang boleh menjadi alamat mutlak (seperti http://example.com) atau alamat relatif (seperti /about.html), atau bahkan panggilan fungsi JavaScript (seperti javascript:void(0)). 链接文本 ialah teks atau imej boleh klik yang dipaparkan pada halaman.

Sebagai contoh, kami ingin menambah pautan pada halaman, dan apabila diklik, ia akan melompat ke tapak web Baidu:

<a href="https://www.baidu.com/">去百度网站逛逛</a>

Ini mewujudkan hiperpautan pada halaman dan apabila diklik, ia akan melompat ke laman web Baidu. Perkara lain yang perlu diambil perhatian ialah jika atribut href kosong, halaman semasa akan dimuat semula apabila pautan diklik.

2. Gunakan fungsi JavaScript

Selain menggunakan teg hiperpautan , anda juga boleh menggunakan fungsi JavaScript untuk mencapai lompatan klik. Sebagai contoh, jika kita ingin melaksanakan butang pada halaman dan melompat ke halaman yang ditentukan selepas mengkliknya, kita boleh menggunakan kod berikut:

<button onclick="window.location.href='目标页面地址'">跳转到目标页面</button>

Antaranya, onclick ialah fungsi pencetus butang acara klik Apabila butang diklik, Kod JavaScript yang disertakan dalam kurungan akan dilaksanakan. window.location.href ialah objek terbina dalam dalam JavaScript, yang mewakili alamat URL halaman semasa. Dengan mengubah suai nilai objek ini, halaman semasa boleh melompat ke halaman yang ditentukan.

Sebagai contoh, kami ingin mencipta butang yang akan melompat ke tapak web Baidu apabila diklik:

<button onclick="window.location.href='https://www.baidu.com/'">去百度网站逛逛</button>

Ini mencipta butang yang akan melompat ke tapak web Baidu apabila diklik.

3. Gunakan penyerahan borang

Dalam HTML, borang boleh digunakan untuk pengguna memasukkan data dan menyerahkannya kepada pelayan yang ditetapkan untuk diproses. Walau bagaimanapun, kami boleh menetapkan alamat penyerahan borang sebagai alamat halaman sasaran, supaya apabila pengguna mengklik butang hantar, mereka akan melompat ke halaman sasaran. Sintaks

adalah seperti berikut:

<form action="目标页面地址">
  <!-- 表单元素 -->
  <input type="submit" value="提交">
</form>

Antaranya, atribut action menentukan alamat halaman sasaran yang borang diserahkan dan input dalam elemen type="submit" menunjukkan bahawa ini adalah butang hantar.

Sebagai contoh, kami ingin menambah borang pada halaman Selepas pengguna mengisi data, klik butang hantar untuk melompat ke tapak web Baidu:

<form action="https://www.baidu.com/">
  <input type="text" name="query" placeholder="请输入要搜索的内容">
  <input type="submit" value="搜索">
</form>

Dengan cara ini, a. borang dibuat, dan pengguna perlu mencari selepas memasukkan Selepas memilih kandungan, mengklik butang hantar akan melompat ke laman web Baidu untuk carian.

Ringkasan

Di atas ialah tiga cara untuk melaksanakan lompatan klik ke halaman dalam HTML: menggunakan teg hiperpautan , fungsi JavaScript dan penyerahan borang. Dalam aplikasi tertentu, kita boleh memilih kaedah yang sesuai mengikut keperluan sebenar. Perlu diingatkan bahawa apabila halaman melompat, gesaan mesra pengguna dan kaedah lompat yang sesuai harus disediakan untuk meningkatkan pengalaman pengguna dan kesan halaman.

Atas ialah kandungan terperinci html klik untuk melompat ke halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!