Bagaimana cara membuat anchor tag tidak merujuk apa-apa?

Saya menggunakan jQuery, saya perlu membuat beberapa anchor tag tidak melakukan tindakan.

Saya biasanya menulis seperti ini:

<a href="#">link</a>

Namun ini merujuk pada bagian atas halaman!

Jika Anda tidak ingin mengarahkannya ke apa pun, Anda mungkin tidak boleh menggunakan <a>tag (anchor).

Jika Anda ingin sesuatu terlihat seperti tautan tetapi tidak bertindak seperti tautan, yang terbaik adalah menggunakan elemen yang sesuai (seperti <span>) dan kemudian gaya menggunakan CSS:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

Juga, mengingat bahwa Anda menandai pertanyaan ini "jQuery", saya berasumsi bahwa Anda ingin melampirkan hander acara klik. Jika demikian, lakukan hal yang sama seperti di atas dan gunakan sesuatu seperti JavaScript berikut:

$('#fake-link-1').click(function() {
    /* put your code here */
});

Ada beberapa solusi yang kurang sempurna:

1. Tautan ke jangkar palsu

<a href="#">

Masalah: mengklik tautan melompat kembali ke bagian atas halaman

2. Menggunakan tag selain 'a'

Gunakan tag rentang dan gunakan jquery untuk menangani klik

Masalah: istirahat navigasi keyboard, harus secara manual mengubah kursor hover

3. Tautan ke fungsi javascript void

<a href="javascript:void(0);">
<a href="javascript:;">

Masalah: rusak saat menautkan gambar di IE

Larutan

Karena semua ini memiliki masalah, solusi yang saya pilih adalah dengan menautkan ke jangkar palsu, dan kemudian kembali palsu dari metode onClick:

<a href="#" onClick="return false;">

Bukan solusi yang paling ringkas, tetapi ini menyelesaikan semua masalah dengan metode di atas.

Untuk membuatnya tidak melakukan apa-apa, gunakan ini:

<a href="javascript:void(0)"> ... </a>

Cara yang benar untuk menangani ini adalah "memecah" tautan dengan jQuery ketika Anda menangani tautan tersebut

HTML

<a href="#" id="theLink">My Link</a>

JS

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

Dua panggilan terakhir menghentikan browser yang mengartikan klik.

Ada banyak cara untuk melakukannya

Jangan tambahkan dan hrefatribut

<a name="here"> Test <a>

Anda dapat menambahkan onclick event daripada href like

<a name="here" onclick="YourFunction()"> Test <a>

Atau Anda dapat menambahkan fungsi void seperti ini yang akan menjadi cara terbaik

<a href="javascript:void(0);"> 
<a href="javascript:;">

Apa yang tidak kamu maksudkan dengan apa pun?

<a href='about:blank'>blank page</a>

atau

<a href='whatever' onclick='return false;'>won't navigate</a>

Saya pikir Anda bisa mencoba

<a href="JavaScript:void(0)">link</a>

Satu-satunya tangkapan yang saya lihat di sini adalah keamanan browser tingkat tinggi dapat meminta eksekusi javascript.

Padahal ini adalah salah satu cara yang lebih mudah daripada

<a href="#" onclick="return false;">Link</a>

ini harus digunakan dengan hemat

Baca artikel ini untuk beberapa petunjuk https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Jawaban ini harus diperbarui untuk mencerminkan standar web baru (HTML5).

Ini:

<a tabindex="0">This represents a placeholder hyperlink</a>

... adalah HTML5 yang valid. Atribut tabindex menjadikannya keyboard yang fokus seperti hyperlink normal. Anda mungkin juga menggunakan spanelemen untuk ini seperti yang disebutkan sebelumnya, tetapi saya menemukan menggunakan aelemen lebih elegan.

Lihat: https://w3c.github.io/html-reference/a.html
dan: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

Berikut adalah tiga cara untuk <a>tag hrefproperti tag merujuk kepada apa-apa:

<a href="JavaScript:void(0)"> link </a>

<a href="javascript:;">link</a >

<a href="#" onclick="return false;"> Link </a>

Saya tahu ini adalah pertanyaan lama, tapi saya pikir saya akan menambahkan dua sen:

Tergantung pada apa yang akan dilakukan tautan, tetapi biasanya, saya akan mengarahkan tautan ke url yang mungkin menampilkan / melakukan hal yang sama, misalnya, jika Anda membuat sedikit tentang kotak sembulan:

<a id="about" href="/about">About</a>

Lalu dengan jQuery

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

Dengan cara ini, browser yang sangat lama (atau browser dengan JavaScript dinonaktifkan) masih dapat menavigasi ke halaman tentang yang terpisah, tetapi yang lebih penting, Google juga akan mengambil ini dan merangkak konten halaman tentang.

Pastikan semua tautan yang ingin Anda hentikan href="#!"(atau apa pun yang Anda inginkan, benar-benar), lalu gunakan ini:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});

Anda dapat memiliki jangkar ( atag) HTML tanpa hrefatribut. Tinggalkan hrefatribut & itu tidak akan terhubung ke apa pun:

<a>link</a>

Satu-satunya hal yang berhasil bagi saya adalah kombinasi dari yang di atas:

Pertama li di ul

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

Kemudian di LoadTab2_1 saya secara manual mengganti div tab

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

Ini karena pemutusan sambungan juga memutuskan tindakan di tab

Anda juga perlu melakukan penataan tab secara manual saat tab utama mengubah sesuatu

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");

Anda bisa melakukannya dengan

<a style='cursor:pointer' >Link</a>

<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

ini adalah tag jangkar saya. jadi kembalikan false pada onClick = "" acara tidak berguna di sini. Saya baru saja menghapus properti href = "#" dan berhasil bagi saya seperti di bawah ini

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

dan saya perlu menambahkan css ini.

.SomeClass
{
    cursor: pointer;
}

Saya mengalami masalah ini di situs WordPress. Header pada menu dropdown selalu memiliki atribut href=""dan plugin header yang digunakan hanya diperbolehkan url standar. Solusi termudah di sana adalah hanya menjalankan kode ini di footer:

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

Ini akan mencegah jangkar kosong dari melakukan apa pun.

Bereaksi tidak lagi mendukung menggunakan fungsi seperti ini href="javascript:void(0)"di jangkar tag Anda, tetapi di sini ada sesuatu yang bekerja dengan cukup baik.

<a href="#" onClick={() => null} >link</a>

Saya tahu ini ditandai sebagai pertanyaan jQuery, tetapi Anda juga dapat menjawabnya dengan AngularJS.

di elemen Anda, tambahkan arahan ng-klik dan gunakan variabel $ event yang merupakan acara klik ... cegah perilaku default-nya:

<a href="#" ng-click="$event.preventDefault()">

Anda bahkan dapat melewatkan variabel $ event ke dalam suatu fungsi:

<a href="#" ng-click="doSomething($event)">

dalam fungsi itu, Anda melakukan apa pun yang Anda inginkan dengan acara klik.