Вкладки - tabs
Простая реализация вкладок на 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>Ссылки
