Скрипт tabs.js реализует простые табы без AJAX-дозагрузки с поддержкой хэш-ссылок (примеры: http://phuketrus.com/ru/dostavka/#tours, http://kotelniky.adlogic.ru/guide/274/#map).
Для использования скрипта tabs.js необходимо:
<script type="text/javascript" src="http://higgs.xevian.com/lib/goodies/tabs.js"></script>
<div class="tabs"> <nav> <a class="active" href="{URL_CURRENT}#info">Информация</a> <a href="{URL_CURRENT}#photos">Фото</a> <a href="{URL_CURRENT}#comments">Комментарии</a> <a href="{URL_CURRENT}#map">Карта</a> </nav> <ul class="containers"> <li class="active" id="info"> Тело блока Информация </li> <li id="photos"> Тело блока Фото </li> <li id="comments"> Тело блока Комментарии </li> <li id="map"> Тело блока Карта </li> </ul> </div>
/** Табы **/ /* общее */ .tabs{ overflow: hidden; } .tabs nav{ display: block; } .tabs nav ul, .tabs nav ol { list-style: none; list-style-image: none; } .tabs nav > a{ display: inline-block; padding: 0.3em 1em 0.30em 1em; } .tabs nav > a:hover{ text-decoration: none; } .tabs .containers{ margin: 0; padding: 0; } .tabs .containers > li{ display: none; margin: -1.9em 0 0 0; padding: 3em 1em 0 1em; } .tabs .containers > li.active{ display: block; } /* фикс для Яндекс.Карт */ .tabs #map{ display: block; visibility: hidden; } .tabs .active#map{ visibility: visible; } /* локальное */ .tabs{ max-width: 70%; margin: 0 auto; } .tabs nav > a{ color: #333; border: 1px solid lightgrey; border-width: 1px 1px 0 1px; } .tabs nav > a.active{ border-width: 2px 1px 0 1px; }
id="map" использует специальные стили для обхода проблемы с незагружающимися Яндекс.Картами.