Заказать услугу
  • +38 099 227-70-70
  • +38 097 770-63-63

Как сделать кликабельные блоки (используем jquery)

1680x1050_piranha

Статья в помощь хорошему верстальщику. Каждый хороший верстальщик знает, тег <a> — строчный элемент, в него во внутрь можно вложить только строчный элемент, но частенько в макете дизайна необходимо сверстать так чтобы блоки были кликабельны (к примеру, «блок с аннотациями новостей»).

Какой предпринять выход из этой ситуации?

  • Вписать в тег <a> еще кучу блоков и сделать верстку не валидной (очень плохой способ).
  • Воспользоваться jquery(+понятная структура html, валидный код).
  • HTML
    
    <div class="post">
         <a href="#">Заголовок новости</a>
         <p>немного текста аннотиции, немного текста аннотиции.</p>
    </div>
    
    JQUERY
    $(document).ready(function(){
        $('.post').click(function(){
            window.location=$(this).find('a').attr('href');
            return false;
        })
    });
    

    P.S. А рыбка тут к тому, что «Без труда не выловишь и рыбку из пруда )»

    Посты этой рубрики посвящены инструментам и стратегиям интернет-маркетинга, призванным увеличить конверсию сайта. Статьи будут интересны и полезны нынешним и будущим владельцам онлайн-бизнеса.
    Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.
    В рубрике «Разбор заплывов» специалисты студии Webakula делятся не только своими опытом, наблюдениями, выводами, но и практическими советами.
    Рубрика поможет разобраться с базовыми терминами интернет-маркетинга, веб-разработки и дизайна. Статьи пригодятся любознательным индивидуумам, которым не безразлична тема сайтостроения.
    Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании Webakula с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)