Вопрос:
Я хочу сделать так, чтобы целой div был доступен клиенту и ссылки на другую страницу при нажатии без JavaScript и с допустимым кодом/разметкой.
Если у меня есть это, что я хочу получить результат –
<a href=»#»> <div>This is a link</div> </a>
Валидатор W3C говорит, что элементы блока не должны размещаться внутри встроенного элемента. Есть ли лучший способ сделать это?
Лучший ответ:
целые div-ссылки на другую страницу при нажатии без javascript и с допустимым кодом, возможно ли это?
Педантичный ответ: Нет.
Как вы уже добавили другой комментарий, он недействителен, чтобы вставить div внутри тега a.
Однако ничего не мешает вам сделать тэг a очень похожим на div, за исключением того, что вы не можете вложить в него другие теги блока. Если это соответствует вашей разметке, установите display:block в свой тег a, а размер /float, как вам нравится.
Если вы откажетесь от своего вопроса, что вам нужно избегать javascript, как указывали другие, вы можете использовать обработчик события onClick. jQuery – популярный выбор для упрощения и обслуживания.
Ответ №1
Можно сделать ссылку, заполняющую весь 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> Ответ №2<div onclick=»location.href=’#’;» style=»cursor: pointer;»> </div> Ответ №3
Без 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. } Ответ №4
Мое решение без 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; }
Есть пример на
Ответ №5
Элементы уровня блока вложения в якорях не являются недопустимыми больше в 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, включая поисковые системы и другие).
Ответ №6
jQuery позволит вам это сделать.
Найдите функцию click():
http://api.jquery.com/click/
Пример:
$(‘#yourDIV’).click(function() { alert(‘You clicked the DIV.’); }); Ответ №7
Ну, вы можете добавить тэги <a></a> и поместить в него div, добавив href, если вы хотите, чтобы div действовал как ссылка. Или просто используйте Javascript и определите функцию OnClick. Но из приведенной ограниченной информации немного сложно определить, в чем заключается контекст вашей проблемы.
Ответ №8.clickable { cursor:pointer; } Ответ №9
Что-то вроде этого?
<div onclick=»alert(‘test’);»> </div> Ответ №10
AFAIK вам понадобится хотя бы немного JavaScript…
Я бы предложил использовать jQuery.
Вы можете включить эту библиотеку в одну строку. И затем вы можете получить доступ к своему div с помощью
$(‘div’).click(function(){ // do stuff here });
и ответьте на событие click.
Ответ №11
мы используем как это
<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
надеюсь, что это поможет.
