Как сделать div кликабельным

Кликабельный DIV

Когда нужно осуществить открытие какой-либо страницы по нажатию на целую таблицу или же блок, наполненный контентом разного рода, тогда-то и нужен кликабельный DIV. Включим логику: нам нужно сделать заключенную в DIV область кликабельной, т.е. при нажатии должна открываться веб-страничка. Для этого нужно обратиться к событию onclick на JavaScript, и прописать туда действие, смену адреса страницы. Конечно, нужно обозначить, что область кликабельна: пропишем в CSS курсор как у ссылок.

Есть альтернативный вариант, но он требует JQuery. Это не плохо. Визуально все то же самое, но для просматривающих код страницы, возможно, это покажется удивительным. Но это в том случае, если Вы поместите скрипт подальше от кода самого блока. У самого тега DIV нет балласта, т.е. событие задается отдельно. И при этом самая главная изюминка здесь в том, что ссылка берется из лежащей внутри «дивки» ссылки.

Делаем div кликабельным: anchor-tag или onclick

Ну, например, несколько квадратов — хочу сделать их кликабельными:

Мне нужно оборачивать их так:

Или прописывать событие onClick?

Речь идет о списке товаров, и клик должен вести на страницу товара.

Что семантически правильно? Например, с точки зрения HTML5.

можно еще: текст внутри в <a>, див — onClick

Выкинуть div вообще.

Из-за таких, как ты, потом интернеты в браузерах тормозят и Ctrl+Shift+клик неправильно работает.

Естественно, если есть вариант обойтись без JS (а ты сам прекрасно видишь что он есть), лучше обойтись без JS. Так твой сайт будет именно что семантичнее, так сказать, декларативнее, и каждый браузер у каждого пользователя сможет обрабатывать твои ссылки лучше, чем когда ссылки притворяются нессылками и ничего неясно, пока не кликнешь или в код не заглянешь.

Плюсую. Для ведромобилок с их браузерами onclick иногда не срабатывает корректно, там тап по экрану имеет другое событие.

И если далеко засунуть открытие ссылки JS’ом (не inline’ом в тот же элемент, а в отдельный JS с вызовом в onlick), то политика браузера может игнорировать подобное поведение.

Если очень хочется извращений, то

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

Some elements are described as transparent; they have «transparent» in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is «transparent» are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.

Ненене, хочется именно правильного способа, никаких извращений и костылей.

Ну тебе ж уже подсказали: <a style=«display:block;»>. </a> в плане отображения абсолютно идентичен <div>. </div>, и больше оборачивать что-либо необходимости (если такая необходимость не следует из каких-то других целей).

Стандарт разрешает, значит не костыль.

А вообще, «по обстоятельствам». Если там реально только простой текст внутри или неинтерактивные блоки, то проще https://www.linux.org.ru/forum/web-development/12254164?cid=12254291 (комментарий).

Если внутри есть интерактивные элементы (кнопки, другие ссылки), то этот вариант не подходит, тогда div. Возможно с <a> вокруг других блоков, не являющихся интерактивными.

float элементы являются блоками.

Ну стандарт и onclink разрешает.

В любом случае, спасибо, я понял Вашу позицию!

Да знаю я про display:block ))

Меня интересует как правильно!) Желательно с аргументацией, мол: "вот решение w3c они так говорят делать" .

вот решение w3c они так говорят делать

Нельзя считать все решения от W3C эталоном правильности. Например, в HTML 4.01 они закапывали target="_blank" для <a>, причём аналогичное поведение можно было реализовать и с помощью жабоскрипта, но это же не значит что эта реализация является правильной.

Два ведра компота этому юноше, за мой счёт! Задрали любители делать через JS то что элементарно делается чистым HTML+CSS.

Сделайте div в ссылку

У меня есть блок <div> с каким-то причудливым визуальным контентом, который я не хочу изменять. Я хочу сделать его доступным для ссылки.

Я ищу что-то вроде <a href=»…»><div> … </div></a> , но это действительно XHTML 1.1.

24 ответа

Пришел сюда в надежде найти лучшее решение, которое мое, но мне не нравится ни одна из предлагаемых здесь. Я думаю, что некоторые из вас неправильно поняли этот вопрос. OP хочет, чтобы div, полный содержимого, вел себя как ссылка. Одним из примеров этого может быть реклама на facebook — если вы посмотрите, это действительно правильная разметка.

Для меня no-nos: javascript (не нужно просто для ссылки и очень плохой SEO/доступность); неверный HTML.

Создайте обычную панель и вставьте в нее нужную ссылку. Внутри ссылки поместите пустой элемент <span></span> (а не <span /> ):

введите панель position: relative

примените следующий CSS к пустому слою:

Теперь он будет закрывать панель, и как она находится внутри тега <a> , это кликабельная ссылка

Вы не можете сделать ссылку div самой, но вы можете сделать тег <a> действующим как block , то же поведение a <div> имеет.

Затем вы можете установить на нем ширину и высоту.

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

Якорный тег работает следующим образом:

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

Требуется небольшой javascript. Но ваш div будет доступен для кликов.

Этот параметр не требует пустого_имя, как и в самом верхнем ответе:

Это «действительное» решение для достижения того, что вы хотите.

Но наиболее вероятно, что вы действительно хотите иметь тег <a> , отображаемый как элемент уровня блока.

Я бы не советовал использовать JavaScript для имитации гиперссылки, поскольку это побеждает цель проверки разметки, что в конечном итоге способствует доступности (публикация хорошо сформированных документов по правильным семантическим правилам минимизирует возможность того, что один и тот же документ будет интерпретироваться по-разному разными браузеры).

Было бы предпочтительнее публиковать веб-страницу, которая не проверяет, но корректно отображает и функционирует во всех браузерах, в том числе с отключенным JavaScript. Кроме того, использование onclick не предоставляет семантической информации для устройства чтения с экрана, чтобы определить, что div работает как ссылка.

Не уверен, что это действительно так, но это сработало для меня.

Самый чистый способ — использовать jQuery с тегами данных, введенными в HTML. С помощью этого решения вы можете создать ссылку на каждый тег, который вы хотите. Сначала определите тег (например, div) тегом данных:

Теперь вы можете стилизовать div, как хотите. И вы также должны создать стиль поведения «link» -alike:

И, наконец, поставьте этот вызов jQuery на страницу:

С помощью этого кода jQuery применяет прослушиватель кликов к каждому тегу на странице, который имеет атрибут «ссылка на данные» и перенаправляет URL-адрес, который находится в атрибуте data-link.

Чтобы заставить ответ отвечать в IE 7 и переходить, ему нужно несколько настроек.

IE не будет соблюдать z-index, если элемент не имеет фонового цвета, поэтому ссылка не будет перекрывать части содержащего div, содержащего контент, только пустые части. Чтобы исправить это, добавлен фон с непрозрачностью 0.

По какой-то причине IE7 и различные режимы совместимости полностью сбой при использовании диапазона в подходе к ссылке. Однако, если сама ссылка дана в стиле, она отлично работает.

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

почему бы и нет? use <a href=»bla»> <div></div> </a> отлично работает в HTML5

Это сообщение Old, которое я знаю, но мне просто нужно было исправить ту же проблему, потому что просто писать обычный тег ссылки с установленным на блоке отображением не делает весь div интерактивным в IE. поэтому исправлять эту проблему гораздо проще, чем использовать JQuery.

Во-первых, давайте поймем, почему это происходит: IE не делает пустой div-щелчок, он только делает текст/изображение внутри этого тега/тега кликабельным.

Решение. Заполните div с помощью изображения bakground и спрячьте его от зрителя.

Как? Вы задаете хорошие вопросы, теперь слушайте. добавьте этот стиль backround в тег

И там у вас есть весь div теперь кликабель. Это был лучший способ для меня заставить Im использовать его для моей фотогалереи, чтобы пользователь клик на одной половине изображения перемещался влево/вправо, а затем помещал небольшое изображение, а также только для визуальных эффектов. так что для меня я использовал левые и правые изображения в качестве фоновых изображений в любом случае!

Просто добавьте ссылку в блок и улучшите ее с помощью jquery. Он деградирует на 100% изящно для всех без javascript. Выполнение этого с помощью html на самом деле не является лучшим решением imho. Например:

Затем используйте jquery, чтобы сделать блок кликабельным (через стену веб-дизайнера):

Затем все, что вам нужно сделать, это добавить стили курсора в div

Для бонусных очков применяются только эти стили, если javascript включен, добавив класс «js_enabled» в div или тело или что-то еще.

div блок как ссылка

bloglink

Сегодня мы попробуем сделать ссылку из div блока. Зачем это нужно? Пускай этот вопрос останется открытым. Я лишь замечу, что эту технологию уже широко применяют, способ этот валиден и очень прост. Итак, конструкция нашего блока такова:

Для смены курсора, добавим CSS:

Вот и все, проще некуда 🙂

Быстро и качественно создадим сайт для Вас.

Старые комментарии:

basovrk 30.07.2011 18:34
Здорово, как раз думал как это реализовать! Еще бы менялся на указатель курсор мыши! 😐

Илья 31.07.2011 12:59
А стили
.linkblock
зачем, по-вашему?
🙂

Алексей 10.01.2012 19:31
Мои благодарности! До этого нашел какой-то чумовой способ через javascript (с кодом строк на 50)

Артур 07.04.2012 18:44
У меня не получается, вожу код в материал в joomla, после того как сохраняет вводимый код исчезает, как быть

Читать:

Как обратиться к переменной из другого скрипта в unity

Илья 07.04.2012 20:20
Это редактор чистит Ваш код. По-хорошему нужно его настраивать, дабы он код не тер.
Но тогда и весь мусор тоже будет сохраняться особенно из word.
Можно схитрить, переключится в режим код, вставить ваш код и сохранить. Тогда он сохранит как есть.

SweetMan 24.07.2012 18:38
У меня этот блок хеадер, с background(ом)в CSS, ввел все как у вас написано через(блокнот) и он не переходит((
P.S ссылаюсь на сайт а не на документ(html)

Илья 24.07.2012 19:30
Ссылка вида http://вашсайт ?

SweetMan 25.07.2012 01:49
Извините за беспокойство, нашел ошибку(невнимательность)!

Dmitri 23.11.2012 13:03
Очень легко и просто.
Спасибо огромное автору.

Сергей 14.02.2013 14:32
Спасибо! И правда все проще некуда! Очень помогло в решении задачи сделать бэкграунд DIVа — ссылкой.

Владимир 17.02.2013 17:54
SweetMan, делай вот так:
А если он в папке, то: бла-бла-бла . =»location.h ref='(Название папки)/ (название твоего html документа).html’;»
. код внутри блока .

И если вы собираетесь текст для CSS писать в сам CSS документ, то пригодится только часть строки:
cursor:pointer

Лена 13.05.2013 17:40
Спасибочки, очень пригодилось! А как можно такой ссылке приписать «nofollow», не подскажете? Или она и так не будет индексироваться ?

Виталий 22.05.2013 18:46
🙂 Спасибо огромное! Не понял, что за валидность, но всё получилось, работает! Ура! (= Спасибо! Легко и просто! Ура!

Олег 28.08.2013 13:36
А как сделать так чтобы ссылка открывалась в новой вкладке?

Серёга 21.11.2013 18:07
Огромное спасибо. 😆

Андрей 05.01.2014 06:44
Почему target=»_blank» не работает с ссылкой? :confused2:

Вадим 09.01.2014 09:45
Скажите, как в joomla отключить авто-чистку кода? Выше уже писали о такой возможности, но хотелось бы поподробней

Виктор 13.02.2014 03:03
Благодарю))

Мистер К. 02.06.2014 12:21
Огромное спасибо за этот прекрасный метод! Запихал в дивы с онкликом блоки картика+текст, всё работает, спасибо! Со стандартым тегом всё шло наперекосяк х))

Ян 07.08.2014 16:24
А как этот метод сделать валидным?

Роман 17.10.2014 15:59
Очень благодарен)) 😆

Максим 23.11.2014 23:30
Есть и еще один способ, так же без JS:
a<
display:block;
>

Роман 23.01.2015 21:44
Если вы используете один класс для нескольких div, первый div кликается, второй нет, тогда делаем так.
Тот который кликабелен
. код внутри блока .
Некликабельный
. код внутри блока .

Алекс 08.05.2015 11:58
Респект! :yehh2:

Рустам 03.08.2015 16:09
Буду признателен за ответ. Сделал 4 div-ссылки, поместил их в другой div побольше. Контейнер смещается вниз и портит всю картину. Подскажите в чем проблема?

Максим 03.08.2015 19:57
Рустам, скиньте код

Hey there I am so delighted I found your web site, I really found you by mistake, while I was browsing on Google for something else, Anyways I am here now and would
just like to say thanks for a fantastic post and a all round exciting blog (I also
love the theme/design), I don’t have time to look over it all at the moment but I have saved it and also included your
RSS feeds, so when I have time I will be back to read a lot more,
Please do keep up the excellent work.

Here is my web blog; Choice CBD Gummies: http://jtayl.me/choicehempgummiesreviews38763

This web site really has all of the information and facts I
wanted about this subject and didn’t know who to ask.

my website; joker123 ฝาก10รับ100 สมัครสล็อต ฟรีเครดิต คาสิโนออนไลน์: http://dungdong.com/home.php?mod=space&uid=2520245&do=profile

Hi there! Do you use Twitter? I’d like to follow you if that
would be okay. I’m definitely enjoying your blog and look forward to new
posts.

Stop by my web page . mesothelioma attorney santa fe springs (Starla: https://vimeo.com/776442298)

Have a look at my blog post idn poker; cn.Uniview.com: https://cn.uniview.com/Aspx/ContractMe/Default.aspx?subject=%u676D%u5DDE%u6C38%u63A7%u79D1%u6280%u6709%u9650%u516C%u53F8&url=http%3A//dentabraces.com,

This is a really good tip especially to those new to the blogosphere.
Simple but very precise information? Thank you for sharing
this one. A must read article!

Also visit my webpage — DYSKN Cream Review: https://sustainabilipedia.org/index.php/Skin_Care_Tips-The_Efficient_To_Treat_Your_Skin

It’s amazing to go to see this web page and reading the views of all mates regarding this piece of writing,
while I am also zealous of getting experience.

Feel free to surf to my web blog . free download movies (http://tizanidinec.com/: http://tizanidinec.com)

My homepage; sbobet (шкодкин.xn--p1 Ai: http://xn--d1aiebqc2e.xn--p1ai/LINK.php?url=http%3a%2f%2frallytennessee.com&stat=1337550071&id=1337550408)

my blog post :: Littlefield 18 Wheeler Accident: https://vimeo.com/709663075

Everyone loves what you guys are up too. Such clever work and exposure!
Keep up the superb works guys I’ve included you guys to my blogroll.

Take a look at my website . [https://www.ex plorenwt.com daftar slot: https://www.phyto-wiki.de/index.php?title=User:SerenaGunther

Thank you for your blog post. Velupe and I are already saving for our new book on this matter and your article has made all of
us to save our money. Your thoughts really clarified
all our inquiries. In fact, a lot more than what we had thought of ahead of the time we found your amazing blog.
I actually no longer nurture doubts and a troubled mind
because you have clearly attended to the needs right here.
Thanks

my homepage Algarve Keto Gummies: http:// meng.luc.h.e.n.4hu.fe.ng.k.Ua.ngniu.bi..uk41 @ Www.Zanelesilvia.wood w.o.r.t.hH.att.ie.M.c.d.o.w.e.ll2.56 .6.3burton.rene @ s.jd.u.eh.yds.g.524.87.59.68.4p.ro.to.t.ypez px.htrsfcdhf.hfhjf.hdas gsdfhdshshfshhu.fe.ng.k.ua.ngniu.bi..uk41 @ Www.Zanelesilvia.wood w.o.r.t.hShasta.erne stsarahjohnsonw.estb rookbertrew.e.rhu.fe.ng.k.Ua.ngniu.bi..uk41 @ Www.Zanelesilvia.wood w.o.r.t.hi.nsult.i.ngp .a.T.lokongwu.chis omwww.sybr.eces.si .v.e.x.g.zleanna.lang tonSus.Ta.i.n.j.ex .kblank.e.tu .y.z.sm.i.scba rne.s.we.xped.it.io.n.eg .d.gburton.rene @e.xped.it.io.n.eg .d.gburton.rene @ Gal.EHi.Nt.on78.8.27dfu.s.m.f.h.u8.645v.nb @ WWW.EMEKAOLISAcarlton.thei ssilvia.wood w.o.r.t.hs.jd.u.eh.yds.g.524.87.59.68 .4c.o.nne.c.t.tn.tu @Go.o.gle.email.2.% 5Cn1sarahjohnsonw.estb rookbertrew.e.rhu.fe.ng.k.Ua.ngniu.bi..uk41 @ Www.Zanelesilvia.wood w.o.r.t.hWww.cana llatinousae.xped.it.io.n.eg .d.gburton.rene @e.xped.it.io.n.eg .d.gburton.rene @N.J.Bm.Vgtsi.O.Ekl.A.9.78.6.32.0@ sageonsailcenovis.The-m.Co.kr ?a%5B%5D=%3Ca+href%3Dhttps%3A%2F%2Falgarveketo.net%3EAlgarve+Keto%3C%2Fa%3E%3Cmeta+http-equiv%3Drefresh+content%3D0%3Burl%3Dhttps%3A%2F%2Falgarveketo.net+%2F%3E

Hello, I wish for to subscribe for this webpage to obtain latest updates, therefore where can i do it please help.

Как сделать div кликабельным

Кликабельный DIV

Делаем div кликабельным: anchor-tag или onclick

Сделайте div в ссылку

24 ответа

div блок как ссылка

Комментарии

Как сделать delay меньше 1 на ардуино

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

Похожие статьи