Сделайте div в ссылку
Я тоже искал его. Я использую код, который я нашел здесь: http://janaxelson.com/hidpage.htm
7 ответов
Это «правильное» решение для достижения того, чего вы хотите.
<style type="text/css">
.myspan {
display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>
Но, скорее всего, вы действительно хотите, чтобы тег отображался как элемент уровня блока.
Я бы не советовал использовать JavaScript для имитации гиперссылки, так как это противоречит цели проверки разметки, которая в конечном итоге заключается в обеспечении доступности (публикация правильно оформленных документов с соблюдением надлежащих семантических правил сводит к минимуму вероятность того, что тот же документ будет интерпретируются по-разному в разных браузерах).
Было бы предпочтительнее опубликовать веб-страницу, которая не проверяет, но отображает и работает правильно во всех браузерах , в том числе с отключенным JavaScript. Более того,
Требуется немного JavaScript.
Но ваш div будет кликабельным.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
Вы не можете сделать Затем вы можете установить ширину и высоту для него. div самой ссылкой, но вы можете сделать тег действует как блок , то же самое поведение имеет a {
display: block;
}
Хотя я не рекомендую делать это ни при каких обстоятельствах, вот некоторый код, который превращает DIV в ссылку (примечание: в этом примере используется jQuery, а некоторая разметка удалена для простоты):
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div[href]").click(function () {
window.location = $(this).attr("href");
});
});
</script>
<div href="http://www.google.com">
My Div Link
</div>
if just everything could be this simple...
#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}
#logo a {padding-top:48px; display:block;}
<div id="logo"><a href="../../index.html"></a></div>
just think a little outside the box ;-)
Это старый пост, я знаю, но мне просто пришлось исправить ту же проблему, потому что простая запись обычного тега ссылки с отображением, установленным на блокировку, не делает весь div интерактивным в IE. так что исправить эту проблему намного проще, чем использовать JQuery.
Во-первых, давайте разберемся, почему это происходит: IE не делает пустой div доступным для кликов, он делает кликабельным только текст / изображение внутри этого тега div / a.
Решение: заполните div фоновым изображением и скройте его от зрителя.
Как? Вы задаете хорошие вопросы, а теперь слушайте. добавьте этот фоновый стиль в тег a
> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"
. И вот теперь весь div доступен для кликов. Это был лучший способ для меня, потому что я использую его в своей фотогалерее, чтобы позволить пользователю кликать по одной половине изображения, чтобы перемещаться влево / вправо, а затем помещать небольшое изображение просто для визуальных эффектов. так что для меня я все равно использовал левое и правое изображения в качестве фоновых изображений!
Пришел сюда в надежде найти лучшее решение, чем мое, но мне не нравится ни одно из предложенных здесь. Я думаю, что некоторые из вас неправильно поняли вопрос. OP хочет, чтобы div, полный контента, вел себя как ссылка. Одним из примеров этого может быть реклама в Facebook - если вы посмотрите, на самом деле это правильная разметка.
Для меня нет: javascript (не нужен только для ссылки и очень плохой SEO / доступность); неверный HTML.
По сути, это так:
- Создайте свою панель, используя обычные методы CSS и действительный HTML.
- Где-то там поместите ссылку, которую вы хотите использовать по умолчанию, если пользователь нажимает на панель (у вас могут быть и другие ссылки).
- Внутри этой ссылки поместите пустой тег диапазона (
- укажите позицию панели : relative
примените следующий CSS к пустому диапазону:
{ позиция: абсолютная; ширина: 100%; высота: 100%; верх: 0; слева: 0; z-индекс: 1; / * исправляет ошибку перекрытия в IE7 / 8, убедитесь, что у вас пустой gif * / фоновое изображение: url ('empty.gif'); }Теперь он будет закрывать панель, и, поскольку он находится внутри тега
- , дающая любые другие ссылки внутри позиции панели: относительное и подходящий z-index ( > 1) поместить их перед ссылкой на диапазон по умолчанию