проверить HREF внутри DIV

Question

У меня есть этот тип разметки

<div class="box" href="pic-gallery/img01.jpg">
  <div>----------</div>
</div>

Теперь, когда я собираюсь проверить это, он показывает ошибку, так как href внутри div не разрешен. Так как проверить эту ошибку? Я использовал

<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>

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

Answer 1

href не является допустимым атрибутом для div, просто a и area. Лучше всего использовать реальную ссылку (элемент a). Вы можете использовать стилирование (display: block), чтобы оно отображалось как блок в современных браузерах (но, к сожалению, в некоторых старых версиях IE), а модель содержимого - прозрачная , вы можете поместить внутри него div. Все примеры на странице с инструкциями Fancybox показывают использование элемента a, а не div.

Так что, возможно

<a class="box" href="pic-gallery/img01.jpg">
  <div>----------</div>
</a>

... где класс "box" включает display: block. Или, если вы используете места этого класса, где вы не хотите показывать блоки, выделите display: block и примените его отдельно (через другой класс или встроенный атрибут style).

Answer 2

С помощью fancybox вы можете показывать свои изображения, помещая их путь в ссылки:

<a class="box" href="pic-gallery/img01.jpg"></a>

Это будет идентифицировано fancybox на основе класса ссылки, например, box, и будет открыто fancybox.

Answer 3

Я знаю, что это необычно, но вы все равно можете открыть изображение (или любой другой тип контента) в fancybox, добавив атрибут onclick к <div> (или любому другому тегу, кроме тега <a>) и без использования атрибута href.

У вас может быть этот (действительный) html:

<div class="box" onclick="openFancybox('pic-gallery/img01.jpg');">
  <div>whatever here</div>
</div>

и используйте этот скрипт:

<script type="text/javascript">
function openFancybox(url){
 $.fancybox({
  'href': url,
  'type': 'image' //select the proper type of content
 });
}
</script>

то, что вы делаете, передает URL-адрес функции вместо использования href

Answer 4

Вместо этого кода.

<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>

Попробуйте это

<script type="text/javascript">function open_win(){window.open("pic-gallery/img01.jpg");}</script><div class="box" onclick="javascript:open_win();"></div>

Но как вы хотите открыть изображение?

Answer 5

Ожидается, что атрибут href недопустим для элемента <div>.Как сказал TJ выше, для этого было бы лучше использовать фактический элемент <a> - это имеет более смысловой смысл.Вы можете даже вкладывать <a> во внешний <div> и скрывать его с помощью CSS, чтобы пользователи без поддержки JS не видели избыточной разметки.