Выделение активного якоря с помощью jQuery





Выделение активного якоря с помощью jQuery

Предположим у нас есть 100500 таблиц. Для навигации по ним используются ссылки.
Пример разметки:

<body>
<div class="wrapper">
<ul>
  <li><a href="#table1">Таблица 1</a></li>
  <li><a href="#table2">Таблица 2</a></li>
  <li><a href="#table3">Таблица 3</a></li>
</ul>
 
<table id="table1">
 <!-- тут наши ячейки -->
</table>
 
<table id="table2">
 <!-- тут наши ячейки -->
</table>
 
<table id="table3">
 <!-- тут наши ячейки -->
</table>
</div>
</body>

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

(function ($) {
    $(document).ready(function() {
           $('ul a').click(function(e) {
            var clickId = $(this).attr('href');
            $('table#'+clickId).addClass('highlight');
        });
    });
})(jQuery);

Теперь, кликая по ссылке мы добавляем таблице класс highlight и его уже можно темизировать как угодно.
Например, добавим немного свечения:

.highlight {
    -webkit-box-shadow: 0px 0px 27px rgba(255, 255, 255, 0.53);
    -moz-box-shadow:    0px 0px 27px rgba(255, 255, 255, 0.53);
    box-shadow:         0px 0px 27px rgba(255, 255, 255, 0.53);
}

Возможно, вам не понравится, что кликая по ссылке якорь оказывается в самом верху экрана. Но это поправимо — его можно выровнять по центру. Для этого немного изменим наш jQuery:

(function ($) {
    $(document).ready(function() {
       $('ul a').click(function(e) {
            var clickId = $(this).attr('href');
            $('table#'+clickId).addClass('highlight');
            e.preventDefault();
            location.href=clickId;
            var windowHeight = $(window).height();
            var elementHeight = $(clickId).height();
            var elementPosition = $(clickId).position();
            var elementTop = elementPosition.top;
            var toScroll = (windowHeight / 2) - (elementHeight / 2);
            window.scroll(500,(elementTop - toScroll));
        });
    });
})(jQuery);




Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
Верстка
24
11 '12 — 19:33:05