Как отключить поведение по умолчанию <a>атрибута "href"?

Question

У меня есть простая боковая панель:.html, я бы хотел, чтобы Page1 не была кликабельной.На Page2.html я бы хотел, чтобы Page2 не была кликабельной.На Page3.html я бы хотел, чтобы Page3 не была кликабельной.

Возможно ли это сделать без Javascript, то есть с чистым HTML и CSS?Если нет, то каков будет самый простой способ сделать это, используя Javascript, jQuery?

Answer 1

На самом деле я бы порекомендовал PHP для этого, поскольку он позволяет избежать возможных проблем с юзабилити / доступностью.

Еще одно замечание: я бы не стал делать это в любом случае.На моем веб-сайте я держу все ссылки доступными - заголовок в любом случае указывает пользователю, где она находится, поэтому отключение ссылок только создает проблемы.

Нет, вам нужен JavaScript, но вам не нужен jQuery.

Сначала выберите элементы:

navlinks = document.querySelectorAll('nav a');

Вам необходимо преобразовать NodeList в Array.Используйте эту функцию:

function array(a) {
  var r = []; for (var i = 0; i < a.length; i++)
    r.push(a[i]);
  return r;
}

navlinks = array(navlinks);

Затем ... позвоните forEach и проверьте правильную ссылку, отключив ее:

navlinks.forEach(function(node) {
  if (node.href == location)
    node.addEventListener('click', function(e) { e.preventDefault(); }, false);
});

Answer 2

Вы можете добавить

onclick="return false"

к тегу <a>, который хотите отключить.

Answer 3

Если вы хотите сделать это чисто с HTML и CSS, вы должны создать настраиваемую боковую панель для каждой страницы.

Однако, если вы не возражаете против использования PHP, это не должно быть большой проблемой.

Answer 4

Лучший способ сделать это - на стороне сервера. В псевдокоде это будет выглядеть примерно так

links = [
  "Page1" : "page1.html"
  "Page2" : "page2.html"
  "Page3" : "page3.html"
]

html = ""

for linkTitle, linkUrl of links

  if current_url is linkUrl
    html += "<li>#{linkTitle}</li>"
  else
    html += "<li><a href='#{linkUrl}'>#{linkTitle}</a></li>"

return "<ul>" + html + "</ul>"