Альтернативы для использования атрибута "#" в href

Возможный дубликат:
Href для ссылок на Javascript: "#" или "javascript: void (0)" ?

Тег <a> используется для создания гиперссылок, но в этом возрасте jQuery и Ajax мы используем его для загрузки HTML в <div> на той же странице, что и теги <a>.

Таким образом, мы устанавливаем атрибут href как href="#", используя или, скорее, злоупотребляя символом # в качестве замещающего, наряду с некоторыми нежелательными побочными эффектами, такими как URL, добавляемый с символом #.

И если вы оставите атрибут href пустым href = "", ссылка не работает.

Есть ли способ сделать это более чистым способом, например, показывать какую-либо текстовую или фиктивную функцию в строке состояния браузера, когда пользователь наводит курсор на ссылку и все же делает ссылку той, что планировал программист?

Вот мой код.

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

Что еще я могу использовать вместо "#", чтобы сделать мой код чистым..?

Ответ 1

Лучшим решением является не использование какого-либо фиктивного заполнителя. Используйте значащий URL-адрес, который, если бы ссылка действительно выполнялась, покажет вам информацию, которую вы получите от запроса AJAX.

Я делаю это регулярно с помощью своих веб-приложений, используя Javascript для улучшения рабочего сайта. Например, 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;
});

Преимущества этого многочисленны. Ваш сайт доступен для чтения с экрана, веб-сканеров и пользователей с отключенным javascript, и даже те, у кого включен javascript, получат значимый URL-адрес в своей строке состояния, чтобы они знали, куда они идут.

Ответ 2

Я обычно использую это:

href="javascript:void(0);"

Установка атрибута anchor href на javascript:void(0); указывает браузеру, что этот якорь не является гиперссылкой на другой документ или якорь,

Ответ 3

Если ваш обработчик onclick возвращает false, ссылка не будет следовать за браузером. Попробуйте следующее:

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

EDIT:

Если вы абсолютно не умеете использовать символ octothorpe (т.е. #), вам это не нужно. Попробуйте следующее:

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

Ответ 4

Зачем вам нужно что-то определять в href?

То, как работает 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>

Но - если ссылка должна фактически перемещаться где-нибудь - сохранить нормальный href
и просто e.preventDefault() регулярное поведение с jQuery.

Ответ 5

nickf избил меня; однако следует упомянуть несколько вещей. Вы никогда не должны использовать протокол "javascript" для ссылки (если, возможно, вы не намерены делать это букмарклет). Это противоположность прогрессивному совершенствованию. По возможности атрибут href должен быть фактическим ресурсом URI, чтобы он мог грамотно деградировать. Во всех других ситуациях рекомендуется "#", и надлежащий JavaScript следует использовать для предотвращения прокрутки страницы до вершины. Существует два способа сделать это. В обработчике кликов либо запретите действие по умолчанию, либо верните false.

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

или

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

Ответ 6

Использование символа "#" в качестве заполнителя в основном делает ссылку "активной". Браузер интерпретирует его как тег, указывающий на что-то еще. Если href пуст, браузер предположит, что тег - это всего лишь еще один тег.

В этом случае нужно назначить некоторый CSS другому тегу, который эмулирует те же функциональные возможности тега. Наведите указатель мыши, поднимите, измените цвет и т.д. Вы можете легко изменить статус окна и заставить его выглядеть так, как пользователь нажимает на ссылку, когда на самом деле они не нажимают на ссылку так же, как делают событие click.

Фактически, лучший вариант, поскольку запуск только функции JS через привязку события, которая не может использоваться без JavaScript, не должна считаться ссылкой в первую очередь.

Ответ 7

Я всегда использую это:

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

Ответ 8

Может быть, я не получаю что-то плохое, но если нет ссылки, вы просто не должны использовать элемент < a/ " > в первую очередь. Используйте некоторые < span/" > или присоедините прослушиватели событий к элементам списка. Вы можете стилизовать эти элементы, используя cursor: pointer; с помощью CSS.

Помните, что в браузерах есть специальные действия, связанные со ссылками, такие как "открыть в новой вкладке", "сохранить целевой элемент" и т.д. Когда вы используете фиктивный атрибут href='', эти действия работают некорректно, поэтому лучше не делать использовать ссылки вообще.

С другой стороны, если вы можете отображать содержимое этих ajaxified частей как обычных страниц (и это имеет смысл), следуйте nickf advice.