Как превратить тег div в ссылку

JS:

<div onclick="location.href='url'">content</div>

jQuery:

$("div").click(function(){
   window.location=$(this).find("a").attr("href"); return false;
});

Обязательно используйте cursor:pointer для этих DIV

Если вы используете HTML5, как указано в этот другой вопрос, вы можете поместить свой div внутрь a:

<a href="http://www.google.com"><div>Some content here</div></a>

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

Если вам нужно установить тег привязки внутри div, вы также можете использовать CSS, чтобы установить привязку для заполнения div через display: block.

Как таковой:

<div style="height: 80px"><a href="#" style="display: block">Text</a></div>

Теперь, когда пользователь помещает курсор в этот div, тег привязки заполняет этот div.

Итак, вы хотите, чтобы элемент был чем-то, чем он не является?

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

Тем не менее, иногда нужно просто нарушать правила. Теперь в вопросе нет javascript, поэтому Я собираюсь поместить здесь заявление об отказе от ответственности:

Вы не можете использовать <div> как ссылку без использования ссылки (или эквивалента, например <form>, который содержит только кнопку отправки) или использования JavaScript.

С этого момента в этом ответе предполагается, что JavaScript разрешен и, кроме того, используется jQuery (для краткости примера).

С учетом всего сказанного, давайте углубимся в то, что делает ссылку ссылкой.

Ссылки обычно представляют собой элементы, на которые вы нажимаете, чтобы перейти к новому документу.

Это кажется достаточно простым. Прослушайте событие щелчка и измените местоположение:

$('.link').on('click', function () {
  window.location = 'http://example.com';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">Fake Link</div>

Вот и все, <div> теперь является ссылкой. Подожди ... что это? А как насчет доступности? Да ладно, программы чтения с экрана и пользователи вспомогательных технологий не смогут щелкнуть ссылку, особенно если они используют только клавиатуру.

Исправить это довольно просто: разрешим пользователям, использующим только клавиатуру, фокусировать <div> и запускать событие щелчка, когда они нажимают Enter:

$('.link').on({
  'click': function () {
    window.location = 'http://example.com';
  },
  'keydown': function (e) {
    if (e.which === 13) {
      $(this).trigger('click');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link" tabindex="0">Fake Link</div>

Опять же, вот оно, <div> теперь ссылка. Подожди ... снова? По-прежнему проблемы с доступностью? О, хорошо, оказывается, вспомогательная технология еще не знает, что <div> является ссылкой, поэтому, даже если вы можете попасть туда с помощью клавиатуры, пользователям не говорят, что с ней делать.

К счастью, есть атрибут, который можно использовать для переопределения роли элемента HTML по умолчанию, чтобы программы чтения с экрана и т.п. знали, как классифицировать настраиваемые элементы, как наш <div> здесь. Атрибутом, конечно же, является атрибут [role], и он прекрасно сообщает программам чтения с экрана, что наш <div> является ссылкой:

$('[role="link"]').on({
  'click': function () {
    window.location = 'http://example.com';
  },
  'keydown': function (e) {
    if (e.which === 13) {
      $(this).trigger('click');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="link" tabindex="0">Fake Link</div>

Наконец, наш <div> - лин --- ох, теперь другие разработчики жалуются. Что теперь?

Итак, разработчикам код не нравится. Они пытались preventDefault на мероприятии, но оно продолжает работать. Это легко исправить:

$(document).on({
  'click': function (e) {
    if (!e.isDefaultPrevented()) {
      window.location = 'http://example.com';
    }
  },
  'keydown': function (e) {
    if (e.which === 13 && !e.isDefaultPrevented()) {
      $(this).trigger('click');
    }
  }
}, '[role="link"]');

$('[aria-disabled="true"]').on('click', function (e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="link" tabindex="0">Fake Link</div>
<div role="link" aria-disabled="true" tabindex="0">Fake disabled link</div>

Вот и оно --- ЕСТЬ БОЛЬШЕ? Что еще я не знаю? Расскажите мне все СЕЙЧАС, чтобы я мог это исправить!

• Хорошо, значит, нет возможности указать цель. Мы можем исправить это, обновив до window.open.
• События щелчка и события клавиатуры игнорируют клавиши Ctrl, Alt и Shift. Это достаточно просто, просто нужно проверить эти значения в объекте события.
• Невозможно указать контекстные данные. Давайте просто добавим несколько [data-*] атрибутов и закончим с этим.
• Событие щелчка не подчиняется используемой кнопке мыши, средняя мышь должна открываться в новой вкладке, правая мышь не должна запускать событие. Достаточно просто, просто добавьте еще несколько проверок для прослушивателей событий.
• Стили выглядят странно. КОНЕЧНО, СТИЛИ СТРАННЫЕ, ЭТО <DIV> НЕ ЯКОРЬ!

Что ж, я обращусь к первым четырем вопросам, и НИКОГДА. У меня было это с этим дурацким мусором кастомных элементов. Я должен был просто использовать элемент <a> с самого начала.

$(document).on({
  'click': function (e) {
    var target,
        href;
    if (!e.isDefaultPrevented() && (e.which === 1 || e.which === 2)) {
      target = $(this).data('target') || '_self';
      href = $(this).data('href');
      if (e.ctrlKey || e.shiftKey || e.which === 2) {
        target = '_blank'; //close enough
      }
      open(href, target);
    }
  },
  'keydown': function (e) {
    if (e.which === 13 && !e.isDefaultPrevented()) {
      $(this).trigger({
        type: 'click',
        ctrlKey: e.ctrlKey,
        altKey: e.altKey,
        shiftKey: e.shiftKey
      });
    }
  }
}, '[role="link"]');

$('[aria-disabled="true"]').on('click', function (e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="link" tabindex="0" data-href="http://example.com/">Fake Link</div>
<div role="link" tabindex="0" data-href="http://example.com/" data-target="_blank">Fake Link With Target</div>
<div role="link" aria-disabled="true" tabindex="0" data-href="http://example.com/">Fake disabled link</div>

_{Обратите внимание, что фрагменты стека не открывают всплывающие окна из-за того, что они изолированы от песочницы.}

Вот и все. Это конец кроличьей норе. Все это безумие, когда можно было просто:

<a href="http://example.com/">
    ...your markup here...
</a>

Код, который я разместил здесь, вероятно, имеет проблемы. Вероятно, в нем есть ошибки, о которых даже я пока не догадываюсь. Трудно повторить то, что браузеры предоставляют вам бесплатно. Существует так много нюансов, которые легко упустить из виду, что просто не стоит пытаться имитировать его в 99% случаев.

НЕ ДЕЛАЙТЕ ЭТО.

• Если вам нужна ссылка, оберните содержимое в правильный <A>NCHOR</a>.
• Если вы хотите превратить <DIV> в ссылку, используйте «Javascript», чтобы заключить <DIV> в <A>NCHOR</A>
• Если вы хотите выполнить какое-либо действие при нажатии <DIV>, используйте onclick обработчик событий ... и не называйте это «ссылкой».

Вы можете сделать весь DIV функцией как ссылку, добавив onclick = "window.location = 'TARGET URL'" и установив его стиль на "cursor: pointer". Но часто это плохая идея, потому что поисковые системы не смогут перейти по полученной ссылке, читатели не смогут открывать вкладки или копировать расположение ссылки и т. Д. Вместо этого вы можете создать обычный тег привязки. а затем установите его стиль на display: block, а затем задайте стиль, как если бы вы использовали DIV.

Вы можете использовать Javascript для достижения этого эффекта. Если вы используете фреймворк, все становится довольно просто. Вот пример в jQuery:

$('div#id').click(function (e) {
  // Do whatever you want
});

Это решение имеет явное преимущество в том, что логика не содержится в вашей разметке.

Имейте в виду, что поисковые пауки не индексируют JS-код. Итак, если вы поместите свой URL в код JS и обязательно включите его в традиционную ссылку HTML в другом месте страницы.

То есть, если вы хотите, чтобы связанные страницы индексировались Google и т. Д.