Href = “#” nedir ve neden kullanılır?

363

Birçok web sitesinde sahip olduğum bağlantıları görüyorum href="#". Bunun anlamı ne? Ne için kullanılır?

html hyperlink

— Samir Ghobril
kaynak

345

Köprüler hakkında:

Bağlantı etiketlerinin ana kullanımı - <a></a>- köprülerdir . Bu temelde sizi bir yere götürdükleri anlamına gelir. Köprüler hrefözelliği gerektirir , çünkü bir konum belirtir.

hash:

#Köprü içindeki bir karma - pencerenin kaydırılması gereken bir html öğesi kimliği belirtir.

href="#some-id"geçerli sayfadaki bir öğeye kaydırır <div id="some-id">.

href="https://stackoverflow.com//site.com/#some-id"site.como sayfadaki kimliğe gider ve

Yukarıya Git:

href="#"bir kimlik adı belirtmez, ancak sayfanın üst kısmında karşılık gelen bir konuma sahiptir. Bir tutturucuyla tıklamak href="#"kaydırma konumunu en üste taşır.

Bu demoya bakın.

Bu, w3 belgelerine göre beklenen davranıştır .

Köprü yer tutucular:

Köprü yer tutucusunun mantıklı olduğu bir örnek şablon önizlemeleri içindedir. Şablonlar için tek sayfa demolarında <a href="#">, bağlantı etiketinin bir köprü olduğunu, ancak hiçbir yere gitmediğini sık sık gördüm . hrefMülkü neden boş bırakmıyorsunuz ? Boş bir hrefözellik aslında geçerli sayfanın köprüsüdür. Başka bir deyişle, sayfanın yenilenmesine neden olur. Bahsettiğim gibi, href="#"aynı zamanda bir köprüdür ve kaydırmaya neden olur. Bu nedenle, köprü yer tutucular için en iyi çözüm aslında href="#!"buradaki fikir, umarım sayfada id="!"(kim yapar !?) ile bir öğe olmadığı ve köprü hiçbir şey ifade etmez - bu yüzden hiçbir şey olmaz.

Çapa etiketleri hakkında:

Merak edebileceğiniz başka bir soru, "Neden sadece href özelliğini kapalı bırakmak değil?". Ben duydum ortak bir yanıt hrefözelliği gerekli olduğunu, bu yüzden çapa "mevcut" olmalıdır. Bu yanlış! hrefMülkiyet aslında bir köprü olmak için bir çapa sadece gereklidir! Bunu w3'ten okuyun. Öyleyse, neden sadece yer tutucular için bırakmıyoruz? Tarayıcılar, öğeler için varsayılan stilleri oluşturur ve href özelliğine sahip olmayan bir tutturma etiketinin varsayılan stilini değiştirir. Bunun yerine, normal metin gibi kabul edilecektir. Tarayıcının öğeyle ilgili davranışını bile değiştirir. Href özelliği olmayan bir tutturucunun üzerine getirildiğinde durum çubuğu (ekranın altında) görüntülenmez. Köprü olarak işlem görmesini sağlamak için bir tutturucuda yer tutucu href değeri kullanmak en iyisidir.

Stil ve davranış farklılıklarını gösteren bu demoya bakın .

— m59
kaynak

1

Tam cevap. Ancak, cevabınızdaki şablon önizleme terimi ne anlama geliyor ?

— 15'te aşırı değer değişimi

3

@overexchange Örneğin, bu sayfaya ve üzerindeki bağlantılara bakın: ironsummitmedia.github.io/startbootstrap-creative Bir dizi CSS / HTML, WordPress teması vb. göstermesi amaçlanan yalnızca html sayfaları, ancak gerçek sayfalar değil, bu yüzden bağlantıların hiçbir yere gitmesi gerekmez.

— m59

1

@Yeung Karma değerini değiştirmek (bu, URL'yi # izleyen bölümdür) sunucuyu çağırmaz. Sayfayı javascript ile değiştirirsiniz. Bu konuda söylenecek çok şey var ve bu yazının kapsamı dışında.

— m59

2

Ayrıca, rastgele tidbit, Android tarayıcıları (tarayıcı, krom vb.), Tutturma etiketleri dışında herhangi bir şeydeki tıklama etkinliklerini kabul etmez. Diyelim ki jQuery'nin .click()yöntemini bir üzerinde kullanmak istiyorsunuz <div></div>, işe yaramayacak. Ya bir çapa üzerinde olmalı ya da toucholayları kullanmalısınız .

— Steely

1

@QHarr Olumlu değilim, ancak boş bir "#" herhangi bir şeye gönderme yapmadığı için, onu bırakmakla aynıdır ve onu bırakmak sadece sayfaya atıfta bulunacak ve sayfalar aksi belirtilmedikçe top. Başka bir deyişle, belki de "en üste kaydır" anlamına gelmez, sadece "bu sayfaya git" anlamına gelmez, bu da sayfanın en üstüne gitmek anlamına gelir.

— m59

85

"#" Sembolünü bir şey için href olarak koymak, farklı bir URL'ye değil, aynı sayfadaki başka bir kimliğe veya ad etiketine işaret ettiği anlamına gelir. Örneğin:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

Ancak, herhangi bir kimlik veya ad yoksa, "hiçbir yere" gider.

İşte benzer başka bir soru 'name' veya 'id' olan HTML Bağlantıları mı?

— KJYe.Ad 葉家仁
kaynak

1

Kimliğine sahip bir öğe - adlandırılmış bir çapa olması gerekmez (ve aslında çapalar adlı bir süredir kullanımdan kaldırılmıştır).

— Oded

2

Buraya geldim çünkü <a href="#">...</a>"hiçbir yere gitmiyordu" sayfadan ayrılıp yükleniyordu site.com/#. Bu nasıl mümkün olabilir?

— doug65536

7

@ doug65536 büyük olasılıkla o öğeye bir onclickolay işleyicisinin bağlı olması, sizi o sayfaya yönlendiren bir javascript işlevinin çağrılmasına neden olmasıdır.

— 14'te

32

Aslında hiçbir yere bağlantı veren bir bağlantıdır (sadece URL'ye "#" ekler). Bir dizi farklı nedenden dolayı kullanılır. Örneğin, bir çeşit JavaScript / jQuery kullanıyorsanız ve gerçek HTML'nin herhangi bir yere bağlanmasını istemiyorsanız.

Ayrıca, sayfanın farklı bir bölümüne yönlendirmek için kullanılan sayfa çapaları için de kullanılır.

— Tyler Treat
kaynak

40

Sadece eklemek için, bu hiçbir yere bir bağlantı değildir ... kayan bir sayfada sizi otomatik olarak en üste kaydırır.

— Misko

26

Ne yazık ki, en yaygın kullanımı, <a href="#">çapa gibi davranabilen ve köprü olmayan öğeleri için bir sınıfa eklenecek cursor: pointer;veya :hoverstil ekleyemeyecek şekilde eklenebilir ve ayrıca eklenebilir olan köprülü olmayan javascript kodlu öğeler isteyen tembel programcılar tarafından kullanılır. ayarlamak hrefiçin çok tembel javascript:void(0);.

Bu sorun, bir <a href="#" onclick="some_function();">veya başka bir kaçınılmaz olarak bir javascript hatası ile sonuçlanır ve bir onclick javascript hatası ile bir çapa her zaman onun sonuna kadar sona erer href. Normalde bu sayfanın üstüne sinir bozucu bir sıçrama olmak kadar biter, ama kullanan sitelerin durumunda <base>, <a href="#">olarak ele alınır <a href="[base href]/#">beklenmedik bir navigasyon sonuçlanan. Herhangi bir günlüğe kaydedilebilir hata oluşturuluyorsa, kalıcı günlükleri etkinleştirmediğiniz sürece bunları ikinci durumda görmezsiniz.

Bir tespit elemanı ise olan olmayan bir çapa olarak kullanıldığında, gereken onun bilgisi hrefiçin set javascript:void(0);uğruna zarif degradasyon.

Sadece iki gün, sadece sayfayı yenilemeliydim ve sonunda bir tıklama olayını yükselten bir işleve kadar izlenen rastgele beklenmedik bir sayfa yönlendirme hata ayıklama harcadım <a href="#">. Değiştirilmesi #ile javascript:void(0);düzeltildi.

Pazartesi yaptığım ilk şey, tüm örneklerin projesini temizlemektir <a href="#">.

— Aufgeschissener Kunde
kaynak

4

"Sabitleme elemanı olarak sabitleme elemanı kullanılıyorsa, zarif bozulma uğruna href'in javascript: void (0) olarak ayarlanması gerekir." [alıntı gerekli]

— Vito De Tullio

Y ile ve olmadan <base>gerçekten büyük bir fark yaratır #. İşaret ettiğiniz için teşekkürler!

— LeOn - Han Li

Sadece sayfayı yenilemeli ve beklenmedik bir sayfa yönlendirmesinde hata ayıklamak için iki gün harcadım ve sonunda <a href="#"> tıklama etkinliğini artıran bir işleve kadar izledim. # Yerine javascript: void (0); onu düzeltti. - Aynı şeyi yaptım ve problemimi de çözdüm.

— Liang

23

Sırasız listeler genellikle bunları menü olarak kullanmak amacıyla oluşturulur, ancak bir liliste öğesi metindir. Liste liöğesi metin olduğundan, fare işaretçisi bir ok değil, bir "I imleci" olacaktır. Kullanıcılar bir şey tıklanabilir olduğunda fare işaretçisi için bir işaret parmağı görmeye alışkındır. Etiketin aiçinde bir tutturma etiketi kullanmak lifare işaretçisinin işaret parmağına dönüşmesine neden olur. İşaret parmağı listeyi bir menü olarak kullanmak için çok daha iyidir.

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

Liste bir menü için kullanılıyorsa ve bir bağlantıya ihtiyaç duymuyorsa, bir URL'nin atanması gerekmez. Ancak sorun, hrefözniteliği dışarıda bırakırsanız , <a>etiketteki metnin metin olarak görülmesi ve bu nedenle fare işaretçisinin I-imlecine geri dönmesidir. I-imleci kullanıcının menü öğesinin tıklanabilir olmadığını düşünmesini sağlayabilir. Bu nedenle, hala bir ihtiyacınız var href, ancak hiçbir yere bağlantıya ihtiyacınız yok.

Bir menü listesi için çok sayıda divveya petiket kullanabilirsiniz , ancak fare işaretçisi onlar için bir I imleci de olacaktır.

Bir menü listesi için üst üste yığılmış çok sayıda düğme kullanabilirsiniz, ancak liste tercih edilir gibi görünüyor. Muhtemelen href="#"bu hiçbir yere işaret etmiyor liste etiketlerinin içindeki bağlantı etiketlerinde kullanılır.

İşaretçi stilini CSS'de ayarlayabilirsiniz, bu başka bir seçenektir. href="#"Hiçbir yere sadece bazı stil ayarlamak için tembel yol olabilir.

— Alan Wells
kaynak

14

Boş bir bağlantı için href = "#" kullanmayla ilgili sorun, sizi sayfanın en üstüne, istenen eylem olmayabilir. Bundan kaçınmak için, eski tarayıcılar veya HTML5 olmayan dokümanlar için şunu kullanın:

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

— RationalRabbit
kaynak

2

Bu çözüm bir senaryo için özellikle yararlı buldum: benim uygulamada, href = '"" çıkış (giriş sayfasına getirmek) işlevselliğini uygulamak için kullanılır. Başka bir amaçla href = "#" kullanırsam, bazen beni giriş sayfasına geri götürür. Href = "#" öğesini href = "javascript: void (0)" olarak değiştirdikten sonra sorun çözüldü.

— Liang

13

Bildiğim kadarıyla, genellikle bazı JavaScript ekli bağlantılar için bir yer tutucudur. Bağlantının ana noktası JavaScript kodu çalıştırılarak sunulur; JS desteğine sahip tarayıcılar gerçek bağlantı hedefini yoksayar. Tarayıcı JS'yi desteklemiyorsa, karma işareti bağlantıyı esasen no-op durumuna dönüştürür. Ayrıca göze batmayan JavaScript'e de bakın .

— zoul
kaynak

13

Diğer cevapların bazılarının belirttiği gibi, aöğe bir hrefözellik gerektirir ve #yer tutucu olarak kullanılır, ancak aynı zamanda tarihsel bir eserdir.

Gönderen Mozilla Geliştirici Ağı :

href

Bu, köprü metni kaynak bağlantısını tanımlayan bağlantılar için gereken tek öznitelikti, ancak artık HTML5'te gerekli değil. Bu özelliğin atlanması bir yer tutucu bağlantısı oluşturur. Href özelliği, bir URL veya bir URL parçası olan bağlantı hedefini belirtir. URL parçası, geçerli belgedeki dahili hedef konumu (ID) belirten bir karma işaretinden (#) önce gelen addır.

Ayrıca, HTML5 spesifikasyonlarına göre :

A öğesinin href özelliği yoksa, öğe, yalnızca öğenin içeriğinden oluşan, alakalı olması durumunda, bir bağlantının başka türlü yerleştirilebileceği yer tutucusunu temsil eder.

— Doug Richardson
kaynak

1

Href özelliği, bir bağlantının kaynağının URL'sini tanımlar. Bağlantı etiketi href etiketine sahip değilse köprü olmaz. Href niteliği aşağıdaki değerlere sahiptir:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>

— Sheo Dayal Singh
kaynak