Как сделать целое "div" кликабельным в html и css без JavaScript?

Ответ 1

целые div-ссылки на другую страницу при нажатии без javascript и с допустимым кодом, возможно ли это?

Педантичный ответ: Нет.

Как вы уже добавили другой комментарий, он недействителен, чтобы вставить div внутри тега a.

Однако ничего не мешает вам сделать тэг a очень похожим на div, за исключением того, что вы не можете вложить в него другие теги блока. Если это соответствует вашей разметке, установите display:block в свой тег a, а размер /float, как вам нравится.

Если вы откажетесь от своего вопроса, что вам нужно избегать javascript, как указывали другие, вы можете использовать обработчик события onClick. jQuery - популярный выбор для упрощения и обслуживания.

Ответ 2

Можно сделать ссылку, заполняющую весь div, что дает возможность сделать div интерактивным.

CSS

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML:

<div id="my-div">
    <a href="#" class="fill-div"></a>
</div>

Ответ 3

<div onclick="location.href='#';" style="cursor: pointer;">
</div>

Ответ 4

Без JS я делаю это так:

Мой HTML:

<div class="container">
  <div class="sometext">Some text here</div>
  <div class="someothertext">Some other text here</div>
  <a href="#" class="mylink">text of my link</a>
</div>

Мой CSS:

.container{
  position: relative;
}

.container.a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px; //these two lines are to hide my actual link text.
  overflow: hidden; //these two lines are to hide my actual link text.
}

Ответ 5

Мое решение без JavaScript/изображений. Используется только CSS. Он работает во всех браузерах.

HTML:

<a class="add_to_cart" href="https://www.redracingparts.com" title="Add to Cart!">
  buy now<br />free shipping<br />no further costs
</a>

CSS

.add_to_cart:hover {
  background-color:#FF9933;
  text-decoration:none;
  color:#FFFFFF;
}

.add_to_cart {
  cursor:pointer;
  background-color:#EC5500;
  display:block;
  text-align:center;
  margin-top:8px;
  width:90px;
  height:31px;
  border-radius:5px;
  border-width:1px;
  border-style:solid;
  border-color:#E70000;
}

Есть пример на https://www.redracingparts.com/english/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php

Ответ 6

Элементы уровня блока вложения в якорях не являются недопустимыми больше в HTML5. См. http://html5doctor.com/block-level-links-in-html-5/ и http://www.w3.org/TR/html5/the-a-element.html. Я не говорю, что вы должны использовать его, но в HTML5 отлично использовать <a href="#"><div></div></a>.

Принятый ответ в противном случае является лучшим. Использование JavaScript, как и других, также плохо, потому что это сделает "ссылку" недоступной (для пользователей без JavaScript, включая поисковые системы и другие).

Ответ 7

jQuery позволит вам это сделать.

Найдите функцию click(): http://api.jquery.com/click/

Пример:

$('#yourDIV').click(function() {
  alert('You clicked the DIV.');
});

Ответ 8

Ну, вы можете добавить тэги <a></a> и поместить в него div, добавив href, если вы хотите, чтобы div действовал как ссылка. Или просто используйте Javascript и определите функцию OnClick. Но из приведенной ограниченной информации немного сложно определить, в чем заключается контекст вашей проблемы.

Ответ 9

.clickable {
  cursor:pointer;
}

Ответ 10

Что-то вроде этого?

<div onclick="alert('test');">

</div>

Ответ 11

AFAIK вам понадобится хотя бы немного JavaScript...

Я бы предложил использовать jQuery.

Вы можете включить эту библиотеку в одну строку. И затем вы можете получить доступ к своему div с помощью

$('div').click(function(){
  // do stuff here
});

и ответьте на событие click.

Ответ 12

мы используем как это

     <label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
    </div>
</label>
   <label for="2"> 
<div class="options">
 <input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>

используя

  <label for="1">

и ловкость -

id=1

надеюсь, что это поможет.