Простая реализация вкладок на jаvascript без подключения сторонних java библиотек.

HTML

<div id="pagecontent">

     <h2 class="tabset_label">Таблица содержимого</h2> 
     <ul class="tabset_tabs">
         <li class="firstchild">
             <a href="#tab1" class="preActive active">Вкладка #1 </a>
         </li>
         <li>
             <a class="preActive postActive" href="#tab2">Вкладка #2 </a>
         </li>
         <li>
             <a class="preActive" href="#tab3">Вкладка #3 </a>
         </li>
         <li>
             <a class="" href="#tab4">Вкладка #4 </a>
         </li>
     </ul>


     <div id="tab1" class="tabset_content tabset_content_active">
         <h2 class="tabset_label">Вкладка #1</h2>
         <p>Вкладка №1</p>
     </div>
    
     <div id="tab2" class="tabset_content">
         <h2 class="tabset_label">Вкладка #2</h2>
         <p>Вкладка №2</p>
     </div>
    
     <div id="tab3" class="tabset_content">
         <h2 class="tabset_label">Вкладка #3</h2>
         <p>Вкладка №3</p>
     </div>

     <div id="tab4" class="tabset_content">
         <h2 class="tabset_label">Вкладка #4</h2>
         <p>Вкладка №4</p>
     </div>

</div>

CSS

.tabset_tabs    { margin:0; padding:0; list-style-type:none; position:relative; z-index:2; white-space:nowrap }
.tabset_tabs li    { margin:0; padding:0; display:inline }
.tabset_tabs a    { color:#444 ! important; background-color:#cbcbcb ! important; border:1px solid #707070; text-decoration:none; padding:0 0.6em; border-left-width:0; border-bottom:none }
.tabset_tabs a:hover    { color:#333 ! important; background-color:#efefef ! important }
.tabset_tabs a.active    { color:black ! important; background-color:white ! important; border-color:#707070; border-left-width:1px; cursor:default; border-bottom:white; padding-top:1px; padding-bottom:1px }

.tabset_tabs li.firstchild a    { border-left-width:1px }

.tabset_content    { border:1px solid #707070; background-color:white; position:relative; z-index:1; padding:0.5em 1em; display:none }
.tabset_label    { display:none }

.tabset_content_active    { display:block }

@media aural{
    .tabset_content,
    .tabset_label    { display:block }
}

jаvascript

Для работы вкладок подключаем 4 файла со скриптами:

<script type="text/javascript" src="addclasskillclass.js"></script>
<script type="text/javascript" src="attachevent.js"></script>
<script type="text/javascript" src="addcss.js"></script>
<script type="text/javascript" src="tabtastic.js"></script>