В /templates/ваш шаблон/css/style.css
ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } .tab_container { border: 1px solid #999; border-top: none; clear: both; float: left; width: 100%; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 20px; font-size: 1.2em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; } .tab_content h3 a{ color: #254588; } .tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; }
в код шаблона
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
//Действие по умолчанию
$(".tab_content").hide(); //Скрыть весь контент
$("ul.tabs li:first").addClass("active").show(); //Активировать первую вкладку
$(".tab_content:first").show(); //Показать контент первой вкладки
//Обработка события "Onclick"
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Удалить любой "active" класс
$(this).addClass("active"); //Добавить "active" класс к выбранной вкладке
$(".tab_content").hide(); //Скрыть контент всех вкладок
var activeTab = $(this).find("a").attr("href"); //Найти rel атрибут для определения активной вкладки+контента
$(activeTab).fadeIn(); //Проявление активного содержимого
return false;
});
});
</script>
<ul class="tabs">
<li><a href="#tab1">Таб 1</a></li>
<li><a href="#tab2">Таб 2</a></li>
<li><a href="#tab3">Таб 3</a></li>
<li><a href="#tab4">Таб 4</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!-- Вывод Таб 1 -->
</div>
<div id="tab2" class="tab_content">
<!-- Вывод Таб 2 -->
</div>
<div id="tab3" class="tab_content">
<!-- Вывод Таб 3 -->
</div>
<div id="tab4" class="tab_content">
<!-- Вывод Таб 4 -->
</div>
</div>
Выходит нечто следующее: