web-dev-qa-db-fra.com

Alternatives pour utiliser "#" dans l'attribut href

Duplicata possible:
Href pour les liens Javascript: "#" ou "javascript: void (0)"?

Le <a> La balise est utilisée pour créer des hyperliens, mais à l'ère de jQuery et Ajax, nous l'utilisons pour charger du HTML dans <div>s dans la même page que le <a> Mots clés.

Cela dit, nous définissons l'attribut href sur href="#", en utilisant ou plutôt en abusant du # en tant qu'espace réservé avec quelques effets secondaires indésirables comme l'URL ajoutée au # personnage.

Et si vous laissez l'attribut href vide href = "", le lien ne semble pas fonctionner.

Est-il possible de le faire de manière plus propre, comme afficher du texte ou une fonction factice dans la barre d'état du navigateur lorsque l'utilisateur survole le lien et faire en sorte que le lien fasse ce que le programmeur voulait?

Voici mon code.

<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);
});

Que puis-je utiliser à la place de "#" pour que mon code soit net ..?

javascripthtmlhref
45
SpikETidE

La meilleure solution est de ne pas utiliser du tout d'espace réservé factice. Utilisez une URL significative qui, si le lien était réellement suivi, vous montrerait les informations que vous obtiendriez de la demande AJAX.

Je le fais régulièrement avec mes applications Web, en utilisant Javascript pour améliorer un site de travail. Par exemple, le HTML:

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

Le Javascript (jQuery):

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

Les avantages en sont nombreux. Votre site est accessible aux lecteurs d'écran, aux robots d'indexation et aux utilisateurs avec Javascript désactivé, et même ceux avec Javascript activé auront une URL significative dans leur barre d'état, afin qu'ils sachent où ils vont.

42
nickf

J'utilise habituellement ceci:

href="javascript:void(0);"

La définition de l'attribut href d'une ancre sur javascript:void(0); indique au navigateur que cette ancre n'est pas un lien hypertexte vers un autre document ou ancre,

16
Andrew Hare

Si votre gestionnaire onclick renvoie false, le lien ne sera pas suivi par le navigateur. Essaye ça:

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

ÉDITER:

Si vous êtes absolument déterminé à ne pas utiliser l'octothorpe (c.-à-d. # symbole), ce n'est pas obligatoire. Essaye ça:

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

Pourquoi avez-vous besoin que quelque chose soit défini en href?

Voilà comment SO fonctionne =>

<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>

Mais - si le lien est censé naviguer quelque part - conservez le href normal
et juste le comportement normal de e.preventDefault () avec jQuery.

2
Arnis Lapsa

nickf me battre dessus; cependant, certaines choses doivent être mentionnées. Vous ne devez jamais utiliser le protocole "javascript" pour un lien (à moins que vous ne souhaitiez peut-être que ce soit un bookmarklet). C'est l'opposé de l'amélioration progressive. Dans la mesure du possible, l'attribut href doit être une ressource URI réelle afin de pouvoir se dégrader correctement. Dans toutes les autres situations, "#" est encouragé et un code JavaScript correct doit être utilisé pour empêcher la page de défiler vers le haut. Il existe deux méthodes pour ce faire. Dans le gestionnaire de clics, empêchez l'action par défaut ou retournez false.

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

ou

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

Peut-être que je ne reçois pas de smething, mais s'il n'y a pas de lien, vous ne devriez tout simplement pas utiliser un élément <a /> en premier lieu. Utilisez certains <span /> ou attachez des écouteurs d'événements pour répertorier les éléments. Vous pouvez styliser ces éléments pour avoir cursor: pointer; en utilisant CSS.

N'oubliez pas que les navigateurs ont certaines actions spéciales associées aux liens, comme "ouvrir dans un nouvel onglet", "enregistrer l'élément cible", etc. Lorsque vous utilisez un mannequin href='' attribuer ces actions fonctionne de manière interrompue, il est donc préférable de ne pas utiliser de liens du tout.

D'un autre côté, si vous pouvez rendre le contenu de ces parties ajaxifiées comme des pages normales (et cela a du sens), suivez les conseils de nickf .

0
pawel

L'utilisation du caractère "#" comme espace réservé rend le lien "actif". Le navigateur l'interprète comme une balise qui pointe vers autre chose. Si href est vide, le navigateur supposera que la balise a n'est qu'une autre balise.

Un moyen de contourner cela consiste à affecter du CSS à une balise différente qui émule la même fonctionnalité de la balise a. En survol, changez la souris, soulignez, changez de couleur, etc. Vous pouvez facilement changer l'état de la fenêtre et donner l'impression que l'utilisateur clique sur un lien alors qu'en réalité il ne clique pas sur un lien autant que sur un événement de clic .

En fait, c'est la meilleure option, car exécuter uniquement une fonction JS via une liaison d'événement qui ne peut pas être utilisée sans JavaScript ne doit pas être considéré comme un lien en premier lieu.

0
Jeff Rupert

J'utilise toujours ceci:

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

0
leepowers