Hiçbir şey yapmayan bir HTML bağlantısı oluşturun (kelimenin tam anlamıyla hiçbir şey)


87

Hiçbir şey yapmayan bir bağlantı istiyorum. Bunu istemiyorum

<a href="#">

çünkü o zaman URL olur something.com/whatever/#.

Bir bağlantı istememin tek nedeni, kullanıcının metne tıklayabileceğini görebilmesidir. JavaScript bazı eylemleri gerçekleştirmek için kullanılıyor, bu nedenle hiçbir yere gitmek için bağlantıya ihtiyacım yok ama bir bağlantı gibi görünmesi gerekiyor!

Bazı veri özniteliklerini kullanabilir ve bu özniteliğe sahiplerse elemanların bağlantı gibi görünmesini sağlamak için CSS söyleyebilirim ama bu biraz abartılı görünüyor.


Neyin var something.com/whatever/#?
Charles Sprayberry

1
javascript'te boş bir href verebilir ve yanlış döndürebilirsiniz. Ancak pointerCSS'nizdeki imleç özelliğini değiştirirseniz daha anlamsal olur
JohnP

@CharlesSprayberry: İstemediğin durumlar var.
PeeHaa

Bu, ux.stackexchange.com'da da sorulabilecek iyi bir soru olacaktır .

1
Bu soru burada daha derinlemesine tartışılmaktadır: stackoverflow.com/questions/134845/…
DawnPaladin

Yanıtlar:


125

Aşağıdakiler href'inizin çalıştırılmasını önleyecektir

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

JQuery kullanıyorsanız, event.preventDefault()kullanılabilir


Ek onclick olaylarının iptal edilmesine neden olur.
Rauli Rajande

6
Sayfanın en üste kaymasına neden olur.
David Hempy

@DavidHempy Bunu deneyimlemiyorum. Hangi tarayıcı?
Curt

1
@curt Google Chrome Sürüm 63.0.3239.84 (Resmi Yapı) (64-bit) (veya muhtemelen iki hafta önce biraz daha eski bir sürüm)
David Hempy

Bu wordpress eklentisi için işe yaramaz, id'ye kaydırın ve bağlantı yine de bir şeyler yapacaktır. Bu durumda, sizi sayfanın en üstüne yönlendirecek olan hatalı bir şey olacaktır.
Jiri Otoupal イ り オ ト ウ パ ー

89

Bunu dene:

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

4
+1 ama hızlı bir soru: javascript:voidve arasında bir fark var javascript:void(0)mı?
Adam Rackis

3
Javascript: void (0) 'ı param olmadan kullanmayı denerseniz SyntaxError'a sahip olursunuz ve tüm komut dosyalarınız başarısız olur.
alexdets

3
@alexdets javascript:void()SyntaxError olacaktır, ancak javascript:voidyalnızca tanımsız döndürür - aynı void(0). Adam, söyleyebileceğim kadarıyla voidve void(0)bu kullanım için işlevsel olarak eşdeğerdir. --- düzenle: Sayfayı yeniden yükleyebileceğine dair başka yorumlar görmeme rağmen ..
andytuba

3
JavaScript / javascript / JavaScript / Javascript'i nasıl büyük harfle yazdığınız önemli mi?
Tim Truston

2
@TechyTimo Büyük harf kullanımı önemli değildir, aslında büyük harfle yazılmamalıdır. Bir düzenleme gönderdim.
Weston Ganger

28

HTML5'te bu çok basittir. hrefÖzniteliği atlayın .

<a>Do Nothing</a>

Gönderen bir etiket href niteliği üzerinde MDN'yi :

href

Bu, bir köprü metni kaynak bağlantısını tanımlayan bağlantılar için gereken tek özellikti, ancak artık HTML5'te gerekli değildir.


Fareyle üzerine gelindiğinde el imleci ne olacak?

Bir tarayıcı için varsayılan stiller, imleci bir işaretçiye dönüştürmeyebilir, ano href. Bunu evrensel olarak aşağıdaki CSS ile değiştirebilirsiniz.

a {
    cursor: pointer;
}
<a>Do Nothing</a>

Bununla birlikte, bu konuda daha seçici olmak ve bunu yalnızca olay işleyicileri eklemek istediğiniz öğelere uygulamak muhtemelen daha iyidir.


Sekmeye odaklanabilir hale getirmeye ne dersiniz?

Sadece tabindex="0"öğeye ekleyin .

<a tabindex="0">Do Nothing</a>


aBağlantısız bir etiket kullanmak mantıklı mı ?

Genellikle hayır, bunun buttonyerine bir öğe kullanmak ve onu CSS ile biçimlendirmek muhtemelen daha iyidir . Ama ne kullanırsanız kullanın, divmümkün olduğunda olduğu gibi keyfi bir öğe kullanmaktan kaçının , çünkü bu hiç anlamsal değildir.


1
Bootstrap 4 ile href içermeyen bağlantılar bağlantı olarak biçimlendirilmez.
user3413723

13

Bunu bir bağlantı yapmayın (yapılması tercih edilse de) ve bir bağlantı gibi görünmesi için CSS ile biçimlendirmeyin:

p.not-a-link { text-decoration: underline; cursor: pointer } 

Ya da daha da iyisi, onu bir bağlantı yapın ve e.preventDefault()bağlantıyı engellemek için kullanılan javascript işlevine izin verin .

Ayrıca, hrefJS etkin olmayan kullanıcıların yine de kullanabilmesi için (yedek olarak) bağlantısını ekleyin .


1
+1 IE5.5 tartışması sona erdiğinde, bir aralık ap'den daha mı iyi olur?
amelvin

1
Açıklığı tercih ederim. P yeni bir sıra yapabilirken, span doesnt
Ronnie Oosting

9

<a href="javascript:;">Link text</a> - genellikle kullandığım şey bu


5
Bu, sayfayı bazı tarayıcılarda yeniden yüklemeyecek mi?
Curt

@Curt: Haklısın, soruyu yanlış okudun. Bir yorumunuz var :-)
Scott Brown

... ve biri düzenledikten sonra da dahil olmak üzere 2 olumsuz oyum var! Sert!
Scott Brown

İlk kodu kaldırın, ardından olumsuz oyumu kaldırmama izin verilecek :) Olumsuz oyu kaldırmama izin vermeyecek, "kilitli"
Curt

1
Bu hangi tarayıcıları etkiliyor, hala bir sorun mu? void(0)Durum çubuğunda gösterildiğinden bu tercih edilir . Diyorum ki, kullanıcılarım bunu bir hata / hata olarak işaretlediğim için (ki bu açıkça değil), bu yüzden bunun onlar için kafa karıştırıcı olduğunu düşünüyorum.
chunk_split

4

Bunu, normalde bir ifadenin değerlendirilmesini javascript:void(0);ve href eklemeyi de içeren tanımsız döndürmeyi içeren javascript void kullanarak başarabiliriz .

Void operatörü genellikle yalnızca tanımlanmamış bir ilkel değer elde etmek için kullanılır, genellikle "void (0)" ("void 0" ile eşdeğerdir) kullanılır. Bu durumlarda, bunun yerine global değişken tanımsız kullanılabilir (varsayılan olmayan bir değere atanmadığı varsayılarak).

a {
  text-decoration: initial;
}
<a href="javascript:void(0);"> This link actually does nothing when clicked</a>


2

@ Curt'ün cevabı işe yarayacaktır, ancak css'de bir imleç stili kullanarak sahte bir bağlantı oluşturma zahmetine girmeden bir bağlantı gibi görünmesini sağlayabilirsiniz. Tarayıcı uyumluluğuna bağlı olarak el veya işaretçiyi kullanın.

Çapraz tarayıcı uyumlu işaretçi css ( imleç stili kılavuzundan):

element {
    cursor: pointer;
    cursor: hand;
}

Eğer yalnızca @PeeHaa Hemen kullanım işaretçi yok IE5.5 iş ve önceki bunu istiyorum!
amelvin

3
Benim söylediğim de bu! Lütfen IE5.5'ten bahsetmeyin: P Daha ciddi bir kayda göre IE5.5 payı 0.17%. İnsanlar hala bu sürümü kullanıyorlarsa web'de
gezinmeyi

2

Hiç kimsenin bahsetmediği bir yol, href'i böyle boş bir yerel dosya konumuna yönlendirmektir.

<a href='\\'>my dead link</a>

neden? React veya angular gibi bir çerçeve kullanırsanız, derleyici günlüğünüzü veya konsolunuzu kirletebilecek bazı uyarılar verir. Bu teknik aynı zamanda robotların veya örümceklerin nesneleri yanlış bir şekilde bağlamasını da önleyecektir.


-1

KULLANMAYIN <a>... bunun yerine kullanın<span class='style-like-link'> ve sonra istediğiniz gibi stil vermek için sınıfı kullanın.


Bağlantısız bir bağlantı etiketi kullanmanın yanlış bir tarafı yoktur, sözde çapa etiketiyle değiştirmek yerine, bunu yapmanın çok daha anlamlı olacağı birçok durum olduğundan bahsetmeye gerek bile yoktur. Bir öğenin diğerine benzeyecek şekilde tasarlanmasından bahsetmiyorum, ancak farklı şekilde uygulanacak, gelecekte bakım sorunlarına neden olabilir
Tim

Kabul. Tamamen kullanım durumuna ve neyi başarmaya çalıştığınıza bağlıdır. Bunu yalnızca başkalarının bunun BİR seçenek olduğunu bilmelerine yardımcı olmak için verdim.
Bryce

Durum buysa, bunu yapmak için mükemmel bir şekilde geçerli olduğunda, bunun için standart bir bağlantı etiketi kullanmamayı büyük harflerle belirtmek yerine, bunun olası bir alternatif olduğunu gösteren bir dil kullanmak için düzenlemenizi öneririm
Tim
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.