Как сделать тег div в ссылку

Как сделать тэг div в ссылку. Я хотел бы, чтобы весь мой div был доступен для клика.

ОТВЕТЫ

Ответ 1

JS:

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

JQuery

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

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

Ответ 2

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

Таким образом:

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Все сказанное, иногда вам просто нужно нарушать правила. Теперь вопрос не имеет 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>

Ответ 6

<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div>

Ответ 7

<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div>

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

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