<style type="text/css">
ul.tabNavigation {
background-color: #f0f0f0;
border-radius: 5px 5px 5px 5px;
box-shadow: inset 0 0 6px #b5b5b5;
list-style: none;
margin: 0;
padding: 0;
}

ul.tabNavigation li {
display: inline;
}

ul.tabNavigation li a {
padding: 3px 8px;
color: #fff;
text-decoration: none;
}

ul.tabNavigation li a.selected,
ul.tabNavigation li a.selected:hover {
color: #000;
}

ul.tabNavigation li a:hover {
color: #000;
}

ul.tabNavigation li a:focus {
outline: 0;
}

div.tabs div {
text-align: center;
padding: 5px;
margin-top: 3px;
background-color: #fff;
border-radius: 5px 5px 5px 5px;
box-shadow: inset 0 0 6px #b5b5b5;
}
</style>

<script type="text/javascript">
$(function () {
var tabContainers = $('div.tabs > div'); 
tabContainers.hide().filter(':first').show(); 
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide(); 
tabContainers.filter(this.hash).show(); 
$('div.tabs ul.tabNavigation a').removeClass('selected'); 
$(this).addClass('selected'); 
return false;
}).filter(':first').click();});
</script>

<div class="tabs">
<center><ul class="tabNavigation">
<li><a class="" href="#first">А</a></li>
<li><a class="" href="#tabsb">Б</a></li>
<li><a class="" href="#tabsv">В</a></li>
<li><a class="" href="#tabsg">Г</a></li>
<li><a class="" href="#tabsd">Д</a></li>
<li><a class="" href="#tabse">Е</a></li>
<li><a class="" href="#tabsyo">Ё</a></li>
<li><a class="" href="#tabsj">Ж</a></li>
<li><a class="" href="#tabsz">З</a></li>
<li><a class="" href="#tabsi">И</a></li>
<li><a class="" href="#tabsii">Й</a></li>
<li><a class="" href="#tabsk">К</a></li>
<li><a class="" href="#tabsl">Л</a></li>
<li><a class="" href="#tabsm">М</a></li>
<li><a class="" href="#tabsn">Н</a></li>
<li><a class="" href="#tabso">О</a></li>
<li><a class="" href="#tabsp">П</a></li>
<li><a class="" href="#tabsr">Р</a></li>
<li><a class="" href="#tabss">С</a></li>
<li><a class="" href="#tabst">Т</a></li>
<li><a class="" href="#tabsy">У</a></li>
<li><a class="" href="#tabsf">Ф</a></li>
<li><a class="" href="#tabsx">Х</a></li>
<li><a class="" href="#tabscc">Ц</a></li>
<li><a class="" href="#tabsch">Ч</a></li>
<li><a class="" href="#tabsvsh">Ш</a></li>
<li><a class="" href="#tabssha">Щ</a></li>
<li><a class="" href="#tabsie">Э</a></li>
<li><a class="" href="#tabsu">Ю</a></li>
<li><a class="" href="#tabsya">Я</a></li>
</ul></center>
<div id="first">
Содержимое буквы А
</div>
<div id="tabsb">
Содержимое буквы Б
</div>
<div id="tabsv">
Содержимое буквы В
</div>
<div id="tabsg">
Содержимое буквы Г
</div>
<div id="tabsd">
Содержимое буквы Д
</div>
<div id="tabse">
Содержимое буквы Е
</div>
<div id="tabsyo">
Содержимое буквы Ё
</div>
<div id="tabsj">
Содержимое буквы Ж
</div>
<div id="tabsz">
Содержимое буквы З
</div>
<div id="tabsi">
Содержимое буквы И
</div>
<div id="tabsii">
Содержимое буквы Й
</div>
<div id="tabsk">
Содержимое буквы К
</div>
<div id="tabsl">
Содержимое буквы Л
</div>
<div id="tabsm">
Содержимое буквы М
</div>
<div id="tabsn">
Содержимое буквы Н
</div>
<div id="tabso">
Содержимое буквы О
</div>
<div id="tabsp">
Содержимое буквы П
</div>
<div id="tabsr">
Содержимое буквы Р
</div>
<div id="tabss">
Содержимое буквы С
</div>
<div id="tabst">
Содержимое буквы Т
</div>
<div id="tabsy">
Содержимое буквы У
</div>
<div id="tabsf">
Содержимое буквы Ф
</div>
<div id="tabsx">
Содержимое буквы Х
</div>
<div id="tabscc">
Содержимое буквы Ц
</div>
<div id="tabsch">
Содержимое буквы Ч
</div>
<div id="tabssh">
Содержимое буквы Ш
</div>
<div id="tabssha">
Содержимое буквы Щ
</div>
<div id="tabsie">
Содержимое буквы Э
</div>
<div id="tabsu">
Содержимое буквы Ю
</div>
<div id="tabsya">
Содержимое буквы Я
</div>
</div>