Кликабельные блоки с помощью jQuery

Опубликовано 04.06.10 / Автор: Иван Саломатин

comments Комментариев 0

Очень часто перед верстальщиком встаёт задача заставить реагировать на нажатие курсора всю площадь блочного элемента, а не только содержащиеся в нём ссылки. Просто «обернуть» ссылкой такой элемент, как, например, div – совсем не выход, поскольку в таком случае страница не пройдёт проверку на валидность (внутри линейного элемента не может находиться блочный!).

Проблема решалась бы просто, если бы мы имели, к примеру, такую конструкцию:

<div  id="parent"><a href="#" class="child">Текст ссылки</a></div>

В таком случае мы могли бы использовать параметры display:block; и position:relative; для ссылки, чтобы она полностью заполнила родительский элемент. Если бы наш <div> имел фиксированные значения ширины и/или высоты, тогда такие же параметры пришлось бы задать и для находящейся внутри его ссылки…

Но как быть в тех случаях, когда внутри блочного элемента, кроме ссылки, находятся и другие элементы (изображения, текст и т. д.)? Тут-то на помощь и приходит jQuery!

Подобную задачу без труда можно решить с помощью простейшего сценария:

<!-- Подключаем библиотеку jQuery -->
<script  type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!--  Наш сценарий -->
<script>
  $(document).ready(function(){
      $("div#parent").click(function(){
      window.location=$(this).find("a.child").attr("href");
      return false;
      });
  });
</script>

Как вы, вероятно, уже догадались, действие сценария заключается в следующем: при клике курсора в любой точке родительского блочного элемента <div id=”parent”>, выполняется поиск элемента <a href=’#’ class=”child”>, из которого «извлекается» значение атрибута href, а затем в окно браузера осуществляется загрузка страницы, расположенной по тому самому «извлечённому» адресу. Вот так, проще не придумаешь!

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

<div class=”first_element”><a  href=’#’>Текст ссылки </a></div>
…
<div  class=”second_element”><h1><a href=’#’>Текст ссылки </a></h1></div>

достаточно прописать такой сценарий:

$(document).ready(function(){
  $(".first_element, .second_element  ").click(function(){
      window.location=$(this).find("a").attr("href");
      return false;
  });
});

Live Example

P.S. Да, и не забудьте добавить свойство cursor:pointer; для блочного элемента, дабы сменить указатель курсора при наведении на кликабельный участок.