javascript - lista - etiquetas html

Alternativas para usar "#" en el atributo href

Question

Posible duplicado:
Href para los enlaces de Javascript: "#" o "javascript: void (0)"?

La etiqueta <a> se usa para crear hipervínculos pero en esta era de jQuery y Ajax lo estamos usando para cargar HTML en <div> s en la misma página que las etiquetas <a> .

Dicho esto, establecemos el atributo href como href="#" , usando o más bien abusando del carácter # como marcador de posición junto con algunos efectos secundarios indeseables como la URL que se adjunta con el carácter # .

Y si deja el atributo href blanco href = "" , el enlace no parece funcionar.

¿Hay alguna forma de hacerlo de una manera más limpia como mostrar texto o una función ficticia en la barra de estado del navegador cuando el usuario pasa el mouse sobre el enlace y hacer 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 que mi código esté ordenado ...?

Answer 1

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

Así es como SO funciona =>

<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 realmente navega en algún lugar, mantén la href normal
y solo el comportamiento regular de e.preventDefault () con jQuery.

Answer 2

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

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

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

El 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 ellos sepan a dónde van.

Answer 3

Si su manejador onclick devuelve 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ás absolutamente decidido a no usar el octothorpe (es decir, # símbolo # ), no tienes que hacerlo. Prueba esto:

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

Answer 4

Tal vez no entiendo mal, pero si no hay ningún enlace, no deberías usar un elemento <a /> en primer lugar. Use algunos <span /> o adjunte oyentes de eventos para enumerar elementos. Puede diseñar estos elementos para que tengan cursor: pointer; usando CSS.

Recuerde que los navegadores tienen algunas acciones especiales asociadas con enlaces, como "abrir en una pestaña nueva", "guardar elemento de destino", etc. Cuando utiliza href='''' atributo ficticio href='''' estas acciones funcionan de forma discontinua, por lo que es mejor no usar enlaces. en absoluto.

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

Answer 5

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

Una forma de evitarlo es asignar algo de CSS a una etiqueta diferente que emule la misma funcionalidad de la etiqueta a. Al pasar el mouse, cambie el mouse, subrayar, cambiar 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 hace clic en un enlace sino que hace clic .

De hecho, esa es la mejor opción, ya que ejecutar solo una función JS mediante el enlace de eventos que no se puede usar sin JavaScript no debería considerarse un vínculo en primer lugar.

Answer 6

Usualmente uso esto:

href="javascript:void(0);"

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

Answer 7

Yo siempre uso esto:

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

Answer 8

nickf me golpeó; Sin embargo, se deben mencionar algunas cosas. jibbering.com/faq/#javascriptURI (a menos que tenga la intención de que sea un bookmarklet). Es lo opuesto a la mejora progresiva. Siempre que sea posible, el atributo href debe ser un recurso URI real para que pueda degradarse con gracia. En todas las demás situaciones, se recomienda "#" y se debe usar el 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, evite 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;
});