2011-07-04 20 views
15

Çalıştığım projede kısa bir süre önce arka uç (ör. Web olmayan) sunuculardan web ile ilgili şeylere geçtim. HTML kodunda biryere şu şeyi buldum: Sole hash çapa href?

<a href='#'>some link</a> 

Sonra bazı JS <a> elemanın click olayına eklenir.

Bu tabanın herhangi bir özel anlamı var mı? href='#some_id''un tarayıcıya ID = some_id numaralı öğeye nasıl kaydırılacağını anlattığını anlıyorum. Ama href='#' bu şekilde çalışmıyor, değil mi? Her şey tıklanabilir bir metin parçası oluşturuyorsa, neden bir <span> kullanıyorsunuz?

+0

Href'i boş bırakırsanız, geçerli sayfa yeniden yüklenir, bu yüzden # ... –

+1

@ webardo - true, ancak bundan daha karmaşıktır. karma ile sayfanın üst kısmına atlayacak, ki bu da istenmeyecek. Bu şeyler genellikle 'href' eyleminin gerçekleştirilmesini durduran yanlış dönen javascript ile eşzamanlı olarak yapılır. Hash hala boş bir dizgeden daha iyidir, çünkü kullanıcı Javascript'i devre dışı bırakır ve ardından bağlantıya tıklarsa, daha az istenmeyen sonuçlara neden olur. – Spudley

+0

Bu göz açıklığını da buldu: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid – Leo

cevap

15

Tam olarak. Burada gördüğünüz şey bir şekilde kötü tasarımdır (href="#"'u kullanmak oldukça yaygın olsa da).

Gerçekte ne yapacağını, varsayılan eylem engellenmezse sayfanın başına atlamaktır.

  • o sunucu üzerindeki bazı eylemi tetikler (bazı gerçek kaynağa bağlantı noktasını buna göre (hatta belki de sadece JavaScript ile eklenen) bir <button> ve stil
  • kullanabilir veya izin Çok daha iyi

    olurdu tarafı) ve istemcide bu (veya benzeri) eylemi yapmak için JavaScript olay işleyicisini ekleyin ve bağlantıyı takip etmeyi engelleyin (anahtar kelime: unobtrusive JavaScript).

Ayrıca, sitenin devre dışı bırakılmış JavaScript ile çalıştığı kastedilir. Evet ise, o zaman böyle bir bağlantı (aynı zamanda bir düğme) çalışmayacaktır.

Ancak her durumda, semantik bakış açısından, yalnızca "tıklanabilir" bir öğeye sahip bir bağlantı kullanmak yanlıştır.

+1

"href", "onclick" ile bazı sunucu tarafı eylemlerini etkinleştirmeyi tercih ederim Sonunda bir "dönüş yanlış" olan js etkin tarayıcılar, sunucu tarafı eylemi ek olarak yapmaz. – Emyr

+1

@Emyr: Aslında bunu kastettim :) –

0

Tarayıcının bu bağlantıyı diğer tüm bağlantılarla aynı şekilde biçimlendirmesini ve belirtmeniz gerekmeden (örneğin, bir class ile), "bildiğiniz gibi, teknik olarak olmasa bile bunun bir bağlantıya benzemesini istiyorum" . Sürdürülebilirlik için gerçekten iyi değil.

0

Çünkü: stil sizin için yapılır

  • ;
  • Bağlantı, bir href no-op ile çalışmaya başlamış olsa bile, anlamsal olarak hala bir bağlantıdır.

Retorik bir soru: Bir span bir bağlantı için a daha uygun olduğunu düşünüyorum neden
açıklayabilir misiniz?

Zeyilname:
bir button gibi bir şey ya da başka bir dinamik unsur daha burada uygundur, ama bir bağlantı olduğunu davranarak metin ve olmayan bir bağlantı span alıyor olabilir kötü olduğunu.

2

Bu taban hashisinin özel bir anlamı var mı?

O Neden sadece bir <span> kullanmak sayfa

üstüne bağlar?

  • Bu odak amacıyla
  • O

A <button> bir yayılma daha iyi olurdu tıklandığında olmalıdır şeyin varsayılan stilleri almayacağız olmayacaktır. built on top of a server side alternative bir şey en iyi olurdu.

+0

Odaklanma sırasına dahil olmak çok iyi bir neden gibi görünüyor. Odak düzeninde bazı öğeleri dahil etmenin başka bir yolu var mı? Bazı tarayıcılarda – Jasiu

+0

'tabindex', ancak bir bağlantıya sahip olmanın ya da mantıklı bir geri dönüşüme sahip gönderme düğmesinin zayıf bir alternatifi. – Quentin

10

Sayfanın üst kısmına kendi bağlantıları olan bir karma.

Bu, bazen tam olarak bu amaçla kullanılır - yani "Başa dön" bağlantısı, ancak daha tipik olarak bu tür bağlantı, Javascript tıklatmayla birlikte kullanıldığında bile yanlış döndürülür ve böylece eylemin etkisini engeller. href. Bu bağlamda

, aşağıdaki nedenlerden dolayı bu şekilde kullanılır:

  • bir <a> etiketi anlam doğru olabilir - öğenin bir bağlantı olarak davranmaktadır tıklanma yani; yani işlevselliği için Javascript kullanıyor olsa bile, daha fazla içerik yüklemek veya bir açılır pencere açmak vb. Ayrıca, <a> etiketinin kullanılması, öğenin sitede bulunan diğer <a> etiketleriyle aynı şekilde biçimlendirileceği anlamına da gelir. Bu, :hover efekt stilleri vb. Içerir. IE6'nın <a> öğelerinde yalnızca :hover öğelerini desteklediğini ve başka bir şey olmadığını, yani sitenin IE6'da çalışmak üzere tasarlandığını veya yine de bunu desteklemesi gerekiyorsa, bu işlevi diğerleriyle eşleyemeyeceğinizi unutmayın. etiketleri. Bu özellik, geçmişte bu özellik için <a> etiketlerini kullanmak için çok uygun bir sebepti. Bugünlerde daha az sorun var. Modern tarayıcılarda bile, bu öğeler için <a> kullanılması, diğer bağlantılarla aynı şekilde görünmesini istiyorsanız, çoğaltılmış stil sayfalarını azaltmak için hala yararlıdır. Linkler da

  • HTML bir <a> etiketi elemanı için sırayla bir href niteliği kazanmış olmaları gereklidir vb sekme indeksi sırayla olarak diğer unsurlar ile çoğaltmak için zor olabilir birkaç diğer özel özellikleri vardır bir bağlantı olarak işlenmelidir, bu nedenle karma bunun için minimum bir değer olarak kullanılır. Buna ek olarak, href özniteliğinde bir karmaşanın olması, kullanıcının Javascript'i kapatması veya geliştiricinin return false;'u unutması durumunda bağlantının kötü beklenmedik sonuçlara neden olmayacağı anlamına gelir. Aksine, boş bir dizgeye sahip olmanız sayfanın yeniden yüklenmesine neden olur; bu, biraz javascript çalıştırmış olmanız durumunda, istediğiniz gibi görünmüyor. Ancak, bağlantı noktasının, Javascript kapatılmışsa çalıştırılacak geçerli bir URL'ye sahip olması yaygındır; Bu, siteniz için bir geri çekilme mekanizmasının olması için iyi bir yoldur. Ama her zaman uygun değildir ve açıkça burada niyet değildir.öğe sadece JavaScript bir tıklama olayı tetiklediğini Verilen

, bunun için başka bir eleman kullanamadı hiçbir neden yoktur. Bunun yerine bir <span> (veya daha iyisi, <button>) 'u çok kolay bir şekilde kullanabilirsiniz, ancak yukarıdaki noktalar bir <a> etiketi kullanıldığında yanlış bir şey olmadığını göstermelidir.

Bu yardımcı olur umarım.

4

Bir href'teki bir karınca aslında iyi bir uygulamadır ve kesinlikle stillenmiş bir açıklıktan (veya daha kötüsü, bir butondan) daha iyidir. Bir etiketteki hash aynı zamanda bir href="javascript:;" ile de değiştirilebilir, bu 'zirveye çıkmayı' engelleyecektir.

Bir href'teki karma, çoğunlukla bu ankraja bağlı javascript olduğunu gösteren bir işarettir.

Düğmeyi öneren kişilere bu bir form öğesidir, formun dışında kullanmayın lütfen.

Açıklık mümkündür, ancak daha önce de belirtildiği gibi sekme odağı alınmayacaktır ve hiçbir anlamsal anlamı yoktur (daha önce de fark edilmiştir).

iyi:

<a href="#">click</a> 
<a href="javascript:;">click</a> 

Kinda iyi:

<span>click</span> 

Kötü Uygulama

Toparlamak gerekirse

+0

harika bir açıklama. Teşekkürler. –