Alternativas para usar “#” en el atributo href [duplicate]

Question 1

los <a> La etiqueta se usa para crear hipervínculos, pero en esta era de jQuery y Ajax, la usamos para cargar HTML en <div>s en la misma página que el <a> etiquetas

Dicho esto, establecemos el href atribuir como href="#"usando o más bien abusando de la # carácter como marcador de posición junto con algunos efectos secundarios no deseados como la URL que se agrega con el # personaje.

Y si dejas el href atributo en blanco href = ""el enlace no parece funcionar.

¿Hay alguna forma de hacer esto de una manera más limpia, como mostrar un texto o una función ficticia en la barra de estado del navegador cuando el usuario pasa el mouse sobre el enlace y, sin embargo, hace que el enlace haga lo que el programador pretendía?

Aquí está mi código.

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

¿Qué más puedo usar en lugar de "#" para hacer mi código limpio ..?

Question 2

La mejor solución es no usar ningún marcador de posición ficticio. Use una URL significativa que, si realmente se siguiera el enlace, le mostraría la información que obtendría de la solicitud AJAX.

Hago esto regularmente con mis aplicaciones web, usando Javascript para mejorar un sitio de trabajo. Por ejemplo, el HTML:

<a href="https://stackoverflow.com/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;
});

Los beneficios de esto son numerosos. Su sitio es accesible para lectores de pantalla, rastreadores web y usuarios con javascript desactivado, e incluso aquellos con javascript activado obtendrán una URL significativa en su barra de estado, para que sepan a dónde se dirigen.

Question 3

Usualmente uso esto:

href="https://stackoverflow.com/questions/1871874/javascript:void(0);"

Establecer un ancla href atribuir a javascript:void(0); indica al navegador que este ancla no es un hipervínculo a otro documento o ancla,

Question 4

Si tu onclick el controlador regresa false, el navegador no seguirá el enlace. Prueba esto:

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

EDITAR:

Si está absolutamente empeñado en no usar el octothorpe (es decir. # símbolo), no es necesario. Prueba esto:

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

Question 5

¿Por qué necesita que se defina algo en href?

Así es como funciona SO =>

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

Pero, si se supone que el enlace debe navegar en algún lugar, mantenga href normal
y solo e.preventDefault() comportamiento regular con jQuery.

Question 6

Tal vez no entiendo algo, pero si no hay un enlace, no deberías usar un elemento en primer lugar. Use algunos o adjunte detectores de eventos para listar elementos. Puede diseñar estos elementos para tener cursor: pointer; utilizando CSS.

Recuerde que los navegadores tienen algunas acciones especiales asociadas con los enlaces, como “abrir en una pestaña nueva”, “guardar elemento de destino”, etc. href="" atribuya que estas acciones funcionan de manera rota, por lo que es mejor no usar enlaces en absoluto.

Por otro lado, si puede representar el contenido de estas partes ajaxadas como páginas normales (y tiene sentido), siga el consejo de nickf.

Question 7

nickf se me adelantó; sin embargo, se deben mencionar algunas cosas. Nunca debe usar el protocolo “javascript” para un enlace (a menos que tal vez tenga la intención de que sea un bookmarklet). Es lo opuesto a la mejora progresiva. Siempre que sea posible, el href El atributo debe ser un recurso de URI real para que pueda degradarse correctamente. En todas las demás situaciones, se recomienda “#” y se debe usar JavaScript adecuado para evitar que la página se desplace hacia la parte superior. Hay dos métodos para hacerlo. En el controlador de clics, impida la acción predeterminada o devuelva falso.

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

o

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

Question 8

El uso del carácter “#” como marcador de posición básicamente hace que el enlace esté “activo”. El navegador lo interpreta como una etiqueta que apunta a otra cosa. Si href está vacío, el navegador asumirá que una etiqueta es solo otra etiqueta.

Una forma de evitarlo es asignar algo de CSS a una etiqueta diferente que emule la misma funcionalidad de una etiqueta. Al pasar el mouse, cambie el mouse, subraye, cambie el color, etc. Puede cambiar fácilmente el estado de la ventana y hacer que parezca que el usuario está haciendo clic en un enlace cuando en realidad no está haciendo clic en un enlace sino haciendo un evento de clic .

De hecho, esa es la mejor opción, porque ejecutar solo una función JS a través del enlace de eventos que no se puede usar sin JavaScript no debería considerarse un enlace en primer lugar.

¿Ha sido útil esta solución?