Soru Href özniteliğinde "#" kullanımı için alternatifler [çoğalt]


Olası Kopyalama:
Javascript bağlantıları için Href: “#” veya “javascript: void (0)”? 

<a> etiket hiperlinkleri oluşturmak için kullanılır ancak jQuery ve Ajax'ın bu çağında HTML'yi yüklemek için kullanıyoruz <div>s ile aynı sayfada <a> etiketleri.

Dedi ki, biz href olarak atlatmak href="#"kullanarak veya kötüye kullanma # bir yer tutucu olarak eklenmiş olan URL gibi istenmeyen yan etkilerle birlikte bir yer tutucu olarak karakter # karakter.

Ve eğer bırakırsan href özellik boş href = "", bağlantı çalışmıyor gibi görünüyor.

Kullanıcı, linkin üzerinden geçtiğinde tarayıcının durum çubuğunda bazı metin veya kukla fonksiyon gösterme gibi daha temiz bir şekilde yapmak ve yine de bağlantının programcının istediği şeyi yapmasını sağlamak için var mıdır?

İşte benim kodum.

<ul id="sidebarmenu1">
   // List that is converted into a menu... 
   <li> <a href="#" id="loadHotel" > HOTEL </a> </li>
   <li> <a href="#" id="loadCountry"> COUNTRY </a> </li>
   <li> <a href="#" id="loadCity"> CITY </a> </li>
</ul>

// The jQuery to load content into another div with Ajax
var loadUrl = "createHotel.php";
$("#loadHotel").click(function() {
    $("#mainContent").html(ajax_load).load(loadUrl);
}); 

// ajax function to load hotel ---> rooms page 

var url_loadRooms = "viewRooms.php";
$("#createRooms").click(function() {
    $("#mainContent").html(ajax_load).load(url_loadRooms);
});

Yerine başka ne kullanabilirim "#" kodumu düzgün yapmak için ..?


39
2017-12-09 06:03


Menşei


Yapılabilecek başka bir şey, bağlantı yönlendirildiğinde çağrılacak olan gerçek JS işlevinin görüntülenmemesi, ancak durum çubuğunda bazı metinlerin gösterilmesidir .... - SpikETidE
@SpikETidE: Verilen cevaplara yaptığınız yorumlara dayanarak, daha spesifik gereksinimleriniz olduğunu düşünüyorum. Büyük olasılıkla yayınınıza eklemek ve tam olarak neden / nasıl "void (0)" yönteminin sizin için işe yaramadığını belirtmek istersiniz. - o.k.w
Çift: stackoverflow.com/questions/134845/... - Josh Stodola
Yinelenen soruları yanıtlama! - Josh Stodola
Tam olarak bir kopya değil ... Bu benzer bir ... Lütfen yorum bölümüne bakın ... - SpikETidE


Cevaplar:


En iyi çözüm, bazı sahte yer tutucu kullanmamaktır. Bağlantının gerçekten izlenmesi durumunda, AJAX isteğinden alacağınız bilgileri size gösteren anlamlı bir URL kullanın.

Bunu, web sitemde düzenli olarak, bir çalışma sitesini geliştirmek için Javascript kullanarak yapıyorum. Örneğin, HTML:

<a href="/users/index" rel="popup">View users</a>

Javascript (jQuery):

$('a[rel*="popup"]').click(function() {
    loadPopup({    // whatever your favourite lightbox is, etc..
        url: this.href
    });
    return false;
});

Bunun yararları çoktur. Sitenize ekran okuyucular, web tarayıcıları ve javascript kullanan kullanıcılar tarafından erişilebilir. Ayrıca, javascript açıkken bile durum çubuğunda anlamlı bir URL olur, böylece nereye gittiklerini bilirler.


41
2017-12-09 06:45



mükemmel cevap .. :) - InfantPro'Aravind'
Çalışıyor, ancak belgeyi şu adresten doğrulamaya çalışıyorsanız validator.w3.org, şu hatayı alırsınız: "Özellik a için öznitelik değeri yanlış değeri a: dize açılan anahtar kelime değil." - Jaime Montoya


Bunu genellikle kullanırım:

href="javascript:void(0);"

Bir çapa ayarlamak href özniteliği javascript:void(0); tarayıcıya bu bağlantı noktasının başka bir belgeye veya bağlantıya köprü olmadığını belirtir.


15
2017-12-09 06:04



Çoğu yer var ama bir şey oraya gitmek zorunda. - Moshe
Merhaba Andrew ... Benim durumumda, kullanıcı bir etiketi tıkladığında daha yüksek bir ajax yükleme işlevi çağırıyorum. Href = "javascript: void (0)" kullanımı ajax çağrısını iptal eder ve tarayıcı "Bu sayfayı görüntülemek için izin verilmedi" mesajını görüntüler. - SpikETidE
@SpikETidE: Hangi tarayıcıyı kullanıyorsunuz? Bu AJAX işlevi neye benziyor? - Andrew Hare
Kodum tüm önemli tarayıcılarda aynı şekilde çalışmalıdır ... Ajax işlevlerim html öğelerini içeren bir php sayfasını div'a yükler. Bu, kullanıcı sayfada zaten bulunan menü öğelerinden birini tıkladığında olur. Bu menü öğeleri, tıklandığında öğeleri ajax işlevlerini çağıracak olan sıralanmamış listeler olarak oluşturulur. Umarım temizim - SpikETidE
Cidden, bunu yapma. Burada iyi bir şekilde özetlenen her türlü problem vardır: jibbering.com/faq/#javascriptURI - Tim Down


Eğer senin onclick işleyici döndürür falseBağlantıyı tarayıcı takip etmez. Bunu dene:

<a href="#" onclick="alert('No # in the address bar!'); return false;">Click Me</a>

DÜZENLE:

Eğer octothorpe kullanmama konusunda kesinlikle cehennemsen (yani. # sembol), zorunda değilsiniz. Bunu dene:

<a href="" onclick="alert('No change in the address bar!'); return false;">Click Me</a>

6
2017-12-09 06:19



"#" Karakterini kullanmamanın bir yolunu arıyorum .... - SpikETidE
@SpikETidE: Ne istersen onu koy href örneğimde öznitelik. Aslında farketmez, çünkü tarayıcı onu takip etmez. - Asaph
Ancak tıklama etkinliğinde false döndürme, jquery .click () işlevini çağırmaz ... - SpikETidE
JavaScript’li tarayıcıları olan kullanıcılar nasıl kapatılır? Etrafında bol miktarda var. Koymalısın anlamlı geri dönüş href böyle kullanıcılar için. - Tim Down
@ Tim Aşağı: sayısı insanlar Aslında JavaScript'i devre dışı bırakarak interneti kullanmak genellikle abartılıdır. Bu rakam aslında Google Analytics'in bu kişileri saymadığı kadar küçük. (Nasıl olabilir, JavaScript tabanlı). Bu günlerde büyük botlar bile JavaScript'i destekliyor. Her halükarda, OP için alternatif (#) yine de anlamlı bir geri dönüşü temsil etmiyor. - Asaph


Neden href'de tanımlanacak bir şeye ihtiyacın var?

SO işler böyle =>

<a id="close-question-1871874" title="closes/opens question for answering....">
  close<span title="3 more vote(s) needed to close this question"> (2)</span>
</a>

Ancak - bağlantının bir yere gitmesi gerekiyorsa - normal href’i
ve jQuery ile e.preventDefault () düzenli davranış.


2
2017-12-09 09:42





nickf beni ona yen; Ancak, birkaç şeyden bahsedilmelidir. Bir bağlantı için "javascript" protokolünü asla kullanmamalısınız (Belki de bir yer imi olmak için niyetinde değilseniz). Aşamalı geliştirmenin tam tersidir. Mümkün olduğunda href öznitelik, gerçek bir URI kaynağı olmalıdır; Diğer tüm durumlarda, "#" teşvik edilir ve sayfanın en üste kaydırılmasını engellemek için uygun JavaScript kullanılmalıdır. Bunu yapmanın iki yolu vardır. Tıklama işleyicisinde, varsayılan eylemi engelleyin veya false değerini döndürün.

$('a[rel*="popup"]').click(function(e) {
    e.preventDefault();
    loadPopup({url: this.href});
});

veya

$('a[rel*="popup"]').click(function() {
    loadPopup({url: this.href});
    return false;
});

1
2017-12-09 10:51





Yer tutucu olarak "#" karakterini kullanmak temel olarak "aktif" bağlantısını yapar. Tarayıcı, başka bir şeye işaret eden bir etiket olarak yorumluyor. Href boşsa, tarayıcı bir etiketin başka bir etiket olduğunu varsayar.

Bunun bir yolu, CSS'yi bir etiketin aynı işlevselliğini öykünen farklı bir etikete atamaktır. Fareyle üzerine gelindiğinde fareyi değiştirin, altını çizin, rengini değiştirin, vb. Pencerenin durumunu kolayca değiştirebilir ve bir tıklatma olayı yapmak kadar çok bir bağlantıyı tıklatmıyorsa, kullanıcının bir bağlantıyı tıklatması gibi görünmesini sağlayabilirsiniz. .

Aslında, bu daha iyi bir seçenek çünkü JavaScript olmadan kullanılamayan etkinlik bağlaması yoluyla yalnızca bir JS işlevinin çalıştırılması, öncelikle bir bağlantı olarak görülmemelidir.


0
2017-12-09 06:11



Merhaba Jeff ... Bu yazıya işaret ettiği gibi stackoverflow.com/questions/134845/...  bir "a" etiketine klavye sekmesi ile erişilirken, diğer yöntem sadece bir fare elemanıdır ... Ayrıca klavyeden de erişilmesini istiyorum ... - SpikETidE
Bu durumda, bir tuşa basmak için bir olay yazmayı düşünürdüm. Ayrıca, kullanıcının belirli bir öğeye sekmesine izin vermek için taborder özniteliğini HTML'de (veya benzeri bir şeyde) kullanabileceğinizi düşünüyorum. Her şey için işe yarayıp yaramadığından emin değilsiniz. Hiç denemedim. Bu durumda klavye erişiminin yararı nedir? - Jeff Rupert
Ayrıca, herhangi bir URL'ye bağlantı noktanız olabilir, ancak onclick olay işleyicisinin false değerini döndürdüğünden emin olun. Bu, balonu durdurur ve bağlantıya asla erişilmez. Ancak, bir kullanıcı JavaScript’i devre dışı bırakmışsa, bu size bir geçici çözümünüzü vermenizi sağlar. - Jeff Rupert
Klavye erişimi sadece kullanılabilirlik içindir ... Bağlantı bir menüde kullanım içindir ve kullanıcı sadece sekme tuşunu kullanarak ona gidebiliyorsa ... - SpikETidE
Tabindex kullanın. Tarayıcıların bağlantı ve form öğeleriyle varsayılan olduğunu düşünüyorum, ancak kendi seçeneklerinizi buraya ekleyebilirsiniz. w3.org/TR/html401/interact/forms.html#h-17.11 - Bu size tabindex hakkında hızlı bir bakış sunmalı ve durumunuza yardımcı olabilir. Kesinlikle false döndürmeyi kullandığınızdan emin olun; köpürmeyi durdurmak için, bağlantı aslında ateşlemiyor, sadece tıklama olayı. - Jeff Rupert


Bunu her zaman kullanırım:

<a href="javascript:;">Click to your heart's delight</a>


0
2017-12-09 06:23



Bu, FF 3'te kullandığımda aldığım uyarıdır ... Firefox, bu adresi nasıl açacağını bilmez, çünkü protokol (javacript) herhangi bir programla ilişkili değildir. - SpikETidE
javascript devre dışı ise işe yarayacak mı? - Jitendra Vyas
Site javascript devre dışı ile çalışmak için tasarlanmışsa jquery kullanmanın bir anlamı yoktur ..... - SpikETidE
SpikEtidE - bu javascript:; değil javacript:; Ayrıca, en zarif çözüm olduğu için Nickf'in cevabını destekledim. - leepowers
Yine, tek çözüm bir geri dönüş olarak anlamlı bir sayfa URL'sidir. jibbering.com/faq/#javascriptURI - Tim Down


Belki ben smething alamıyorum, ama eğer bir bağlantı yoksa, ilk etapta bir <a /> elementi kullanmamalısınız. Öğeleri listelemek için biraz <span /> kullanın veya olay dinleyicilerini ekleyin. Sahip olmak için bu öğeleri stil cursor: pointer; CSS kullanarak.

Tarayıcıların, "yeni sekmede aç", "hedef öğeyi kaydet" vb. Gibi bağlantılar ile ilişkili bazı özel işlemlerin olduğunu unutmayın. Kukla kullanırken href='' Bu eylemleri öznitelikle bozmak, bu nedenle bağlantıların hiç kullanılmaması daha iyidir.

Öte yandan, bu ajaxified parçaların içeriğini normal sayfalar halinde oluşturabilirseniz (ve mantıklıysa), Nickf'in tavsiyesi.


0
2017-12-09 09:32