Таблица с переключаемыми вкладками
Таб-контейнер с возможностью оформления вида каждой вкладки и вида переключаемых кнопок, включённой кнопки и неактивных кнопок на текущей вкладке, общей фоновой картинкой в размер всей таблицы и т.д.
Автор: Deff
Платформа: любая
Демо:
[html] <!-- Стиль меню таблицы в объявлении -->
<style type="text/css">
/****************************************
Таблица с переключаемыми Вкладками
****************************************/
#tab2,#tab2*{
paddibg:0;
margin:0;
}
#tab2 {
background:transparent url(http://s2.uploads.ru/Eu9Vt.png) 0 0 no-repeat;
height:286px;
width:790px;
outline:solid red 1px;/* Убираем Строку после настройки*/
}
#tab2,#tab2 td{
border:none 0 transparent!important;
border-collapse:collapse;
}
img[data^="tab"]{
cursor:pointer;
height:100%;
outline:solid red 1px;/* Убираем Строку после настройки*/
border:none 0 transparent!important;
}
.tab-content {
display:none;
width:100%;
height:226px;
outline:solid blue 1px;/* Убираем Строку после настройки*/
color:#fff;
overflow-y:auto;
}
</style>
<script type="text/javascript">
$.fn.switch_tabs = function() {
var tbl = this,knopK = $("img[data^='tab']",tbl);
knopK.each(function(){
var arr = $(this).attr('data').split(",");
$(this).css("background-image","url("+arr[1]+")")
}); knopK.css("background-position","120% 10000px")
knopK.css("background-repeat","no-repeat")
knopK.click(function(){
knopK.removeClass('active');
$(this).addClass('active');
var arr = $(this).attr('data').split(",");
tbl.css("background-image","url("+arr[1]+")")
$(".tab-content",tbl).hide();
$("#"+arr[0]+"",tbl).show();
});
}
</script>
<table id="tab2" class="tbl-0" border="0">
<tr>
<td class="butt" valign=center height=40> <!-- Секция кнопок -->
<img width="195" data="tab-1,http://s2.uploads.ru/Eu9Vt.png" src="/i/blank.gif" class="active"/>
<img width="238" data="tab-2,http://s2.uploads.ru/IR1f9.png" src="/i/blank.gif"/>
<img width="135" data="tab-3,http://s3.uploads.ru/SolKv.png" src="/i/blank.gif"/>
<img width="60" data="tab-4,http://s2.uploads.ru/HeSUV.png" src="/i/blank.gif"/>
</td>
</tr>
<tr>
<td class="content" align=center>
<!-- Контейнер контента 1-й кнопки -->
<div id="tab-1" class="tab-content" style="display:block;">
Контент 1-й кнопки
</div>
<!-- Контейнер контента 2-й кнопки -->
<div id="tab-2" class="tab-content">
Контент 2-й кнопки
</div>
<!-- Контейнер контента 3-й кнопки -->
<div id="tab-3" class="tab-content">
Контент 3-й кнопки
</div>
<!-- Контейнер контента 4-й кнопки -->
<div id="tab-4" class="tab-content">
Контент 4-й кнопки
</div>
</td>
</tr>
</table><script>$("#tab2").switch_tabs()</script><!--//End/-switch Tabs -->
[/html]
Скрипт и стиль
таблица:
