Как сделать кликабельный блок?

Сегодня узнал замечательный трюк, который мне тут же и пригодился. Зачастую нужно сделать какой-либо блочный элемент, например <div>, кликабельным. Помещать его в тег <a> не выход, потому что это бред, да еще и не валидно.

Решение просто, как все гениальное:

<div onclick="location.href='http://google.com';"></div>

Только не забудьте в оформлении к этому блоку добавить курсор, иначе никто не догадается о том, что он кликабельный :)

div {cursor: pointer;}

Метки: , , , ,

Комментарии

  1. бабуся 07.12.2009 в 18:53 #

    Сынку, а як же шостий вiслюк? Що невже працюе?

    • Neolot 07.12.2009 в 19:02 #

      А як же ж! Головне, щоб JS був включений.

  2. бабуся 07.12.2009 в 22:37 #

    голос за кадром «оооуу дiду, я знайшла пiлюлю для нашого вiслюкааа»

    Сiм'я Майгурових вiд щирого серця дякуе тобi!

  3. Never Lex 02.07.2010 в 12:07 #

    Совершенно правильно. Только JS может быть отключен и часть функционала потеряется. Нужно хотя бы ноиндекс прописать.

  4. DPolyakov 29.10.2010 в 10:36 #

    Почему с a не валидно? Делаем ему display:block;

    Если нужны элементы внутри, то делаем из span`ами, у которых тоже display:block

    • Neolot 29.10.2010 в 10:40 #

      display:block валидности ему не прибавит, можете проверить

      • SelenIT 29.03.2011 в 20:15 #

        Со спанами — прибавит.

        А с единственным доктайпом, который одинаково понимают браузеры и валидаторы () — и с div будет валидно. И даже будет работать везде, включая IE6 (не без нюансов, конечно, но это уж как всегда).

      • SelenIT 29.03.2011 в 20:37 #

        Извиняюсь, код доктайпа проглотил голодный парсер — имелся в виду <!doctype html>

  5. ilyas 17.04.2011 в 14:10 #

    здравствуйте Neolot, можно от вас получить PSD макет и сверстать его вам, как раз проверите мои ошибки если будут, просто хочется услышать авторитетное мнение конечно же на мыло про свою верстку,

Ваше мнение

Если вам нужно вставить код, оберните его в специальный шорткод [php], [html], [css], [js].
Например: [js]Ваш код[/js]