Вкладки

Система вкладок позволяет компактно на одной странице разместить разнообразную, структурированную информацию.

Например, заправка картриджей в разрезе производителей, описание особенностей отправки СМС, варианты формирования карты сайта.

Вкладки формируются с помощью JavaScript + CSS. Удобство представленного здесь скрипта - его универсальность. Достаточно задать стили у элементов span и div и вкладки будут сформированны автоматически. Ограничение этого приема - на одной странице может быть только одна группа вкладок, но в большинстве случаев большего и не нужно.

HTML-код вкладок:

<!-- вкладки -->
<div>
<span class="layer l act" onClick='layer(0)'>Вкладка 1</span>
<span class="layer l" onClick='layer(1)'>Вкладка 2</span>
<span class="layer l" onClick='layer(2)'>Вкладка 3</span>
<!-- это блок вкладок, сдвинутый в правый край -->
<span class="layer r" onClick='layer(3)'>FAQ</span>
<span class="layer r" onClick='layer(4)'>Помощь</span>
</div>
<div class="clear"></div>
<!-- блоки информации -->
<div class="layer act">
    Содержимое вкладки № 1
</div>
<div class="layer">
    Содержимое вкладки № 2
</div>
<div class="layer">
    Содержимое вкладки № 3
</div>
<div class="layer">
    Содержимое вкладки FAQ
</div>
<div class="layer">
    Содержимое вкладки Помощь
</div>

Вкладки нумеруются с нуля. Отсчет идет в порядке их размещения в HTML-коде.

Стили, формирующие вкладки:

/* вкладки */
span.layer{
    cursor: pointer;
    border: 1px solid #555555;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    padding: 4px;
    font-size: 11px;
    line-height: 18px;
    display: block;
}
span.act{
    background-color:#EEEEEE;
    font-weight:bold;
}
.l {
    float: left;
}
.r {
    float: right;
}
.clear {
    clear: both;
}
/* блоки информации */
div.layer{
    border: 1px solid #555555;
    width: 100%;
    color: #000;
    background-color: #EEEEEE;
    padding: 5px;
    display: none;
    line-height: 20px;
}
div.layer p {
    padding: 10px 20px;
}
div.act{
    display: block;
}

Скрипт, позволяющий переключать вкладки на странице:

function layer(a){
    l=getElementsByClass('layer',null,'div');
    for(var i=0;i<l.length;i++)l[i].style.display=(i==a?'block':'none');
    l=getElementsByClass('layer',null,'span');
    for(var i=0;i<l.length;i++){
        l[i].className=(i==a?'layer act':'layer');
    }
}

/* универсальная функция получения всех DOM объектов заданного класса */

function getElementsByClass(searchClass,node,tag){
    var classElements=new Array();
    if ( node == null ) node=document;
    else if(typeof(node)!="object")node=document.getElementById(node); if(!node)return;
    if ( tag == null ) tag='*';
    var els=node.getElementsByTagName(tag);
    var elsLen=els.length;
    var pattern=new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i=0, j=0; i < elsLen; i++) {
           if ( pattern.test(els[i].className) ) {
                classElements[j]=els[i];
               j++;
          }
    }
    return classElements;
}