Тег {amp}lt;a{amp}gt; используется для создания гиперссылок, но в наше время jQuery и Ajax мы используем его для загрузки HTML в {amp}lt;div{amp}gt; на той же странице, что и теги {amp}lt;a{amp}gt; .

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

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

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

Вот мой код.

 {amp}lt;ul id="sidebarmenu1"{amp}gt; // List that is converted into a menu... {amp}lt;li{amp}gt; {amp}lt;a href="#" id="loadHotel" {amp}gt; HOTEL {amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; {amp}lt;a href="#" id="loadCountry"{amp}gt; COUNTRY {amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; {amp}lt;a href="#" id="loadCity"{amp}gt; CITY {amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; // 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 ---{amp}gt; rooms page var url_loadRooms = "viewRooms.php"; $("#createRooms").click(function() { $("#mainContent").html(ajax_load).load(url_loadRooms); }); 

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

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

Я делаю это регулярно с моими веб-приложениями, используя Javascript для улучшения работы сайта. Например, HTML:

 {amp}lt;a href="/users/index" rel="popup"{amp}gt;View users{amp}lt;/a{amp}gt; 

Javascript (jQuery):

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

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

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

 href="javascript:void(0);" 

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

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

 {amp}lt;a href="#" onclick="alert('No # in the address bar!'); return false;"{amp}gt;Click Me{amp}lt;/a{amp}gt; 

РЕДАКТИРОВАТЬ:

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

 {amp}lt;a href="" onclick="alert('No change in the address bar!'); return false;"{amp}gt;Click Me{amp}lt;/a{amp}gt; 

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

Вот так ТАК работает ={amp}gt;

 {amp}lt;a id="close-question-1871874" title="closes/opens question for answering...."{amp}gt; close{amp}lt;span title="3 more vote(s) needed to close this question"{amp}gt; (2){amp}lt;/span{amp}gt; {amp}lt;/a{amp}gt; 

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

Никф побил меня к этому; Однако следует упомянуть несколько вещей. Вы никогда не должны использовать протокол «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; }); 

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

Обходной путь — назначить CSS-код другому тегу, который эмулирует ту же функциональность тега. При наведении наведите курсор мыши, подчеркните, измените цвет и т. Д. Вы можете легко изменить состояние окна и создать впечатление, будто пользователь нажимает на ссылку, когда на самом деле он не столько щелкает ссылку, сколько совершает событие щелчка ,

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

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

{amp}lt;a href="javascript:;"{amp}gt;Click to your heart's delight{amp}lt;/a{amp}gt;

Возможно, я ничего не понимаю, но если ссылки нет, вам просто не следует использовать элемент {amp}lt;a /{amp}gt;. Используйте некоторые {amp}lt;span /{amp}gt; или прикрепите прослушиватели событий к элементам списка. Вы можете стилизовать эти элементы, чтобы иметь cursor: pointer; используя CSS.

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

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