3 024 Скрипты / Tabs

Анимированные вкладки

Анимированные вкладки

Анимированные вкладки для лучшего использования пространства на сайте построенные на jQuery и CSS.
В CSS используются скругления, которые не работают в iexplorer, но замечательно смотрятся в Firefox, Chrome и Opera.

HTML

Вот такая простая разметка, в хедере не забываем подключить jQuery библиотеку.

<div id="wrap">
    <a href="jаvascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">Вкладка 1</a>  
    <a href="jаvascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">Вкладка 2</a>
    <a href="jаvascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">Вкладка 3</a>       
    <br clear="all" />
    <div id="body" align="center">
        <div class="a">
            <em>PC</em>vector.net - это сайт
        </div>        
        <div class="b"><em>Т</em>ермин «веб-мастер» </div>
        <div class="c"><em>Я</em>зык HTML</div>
    </div>
</div>  

CSS

Вот такой css код используется для отображения вкладок:

body{
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
}
.b, .c{ display:none;}
#body em{ font-style:normal; font-size:36px;}
.buttons{
    border-bottom:solid #d1c8b8 4px;
    display:block;
    padding:8px;
    width:80px;-moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;
    text-align:center;
    margin:1px;
    background:#1E3FD3;
    text-decoration:none; color:#FFFFFF;
    float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
.buttonHover{background:#5497D2;border-bottom:solid #FF0000 4px;}
a.buttons:hover{background:#5497D2;border-bottom:solid #FF0000 4px;}
#body {
    background:#AAB9FA;
    text-align:justify;
    overflow:hidden;
    color:#fff;
    padding:20px;
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;    height:200px;
    width:272px;
}
 
#wrap{
    text-align:left;
    overflow:hidden;
    width:350px;
    height:380px;
}

JS

И такой вот jаvascript код:

$(document).ready(function() { 
    $("#first-tab").addClass('buttonHover');
});
function navigate_tabs(container, tab)
{    
    $(".b").css('display' , 'none');
    $(".c").css('display' , 'none');
    $(".a").css('display' , 'none');
    
    $("#first-tab").removeClass('buttonHover');
    $("#second-tab").removeClass('buttonHover');
    $("#third-tab").removeClass('buttonHover');
    
    $("#"+tab).addClass('buttonHover');
    $("."+container).show('slow');
}
Скачать 571Загрузок 1,94 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи