jquery Tabs

jquery плагин для табов

by selahssea

HTML

<div class="section">
                        <ul class="tabs">
                            <li class="current">1. Бронирование</li>
                            <li>2. Регистрация</li>
                            <li>3. Личный кабинет</li>
                            <div class="clear"></div>
                        </ul>
                        <div class="box visible">
                            <p>Клиент (он же пользователь) регистрируется в системе введя свой номер телефона и номер  </p>
                        </div>
                        <div class="box">
                            <p>Клиент (он же пользователь) регистрируется в системе введя свой номер телефона и номер и модель автот
нспорта, после чего ему становится доступна </p>
                        </div>
                        <div class="box">
                            <p>Клиент (он же пользователь) регистрируется в системе введя свой номер телефона и номер и модель автот
нспорта, после чего ему становится доступна возможность пользования системой в которой он бронирует 
очередь с помощью модуля </p>
                        </div>
                        
                    </div><!-- .section -->

CSS

body{
    padding:20px;
}
.clear{
    clear:both;
}

.tabs > li{
  float: left; 
  padding-right: 12px;
  display:inline-block;
  padding-left: 12px;
  margin-right: 2px;
  line-height: 14px;
  cursor:pointer;
}

.tabs {
  border-bottom: 1px solid #ddd;
}

.tabs > li {
  margin-bottom: -1px;
    background:#eee;
}

.tabs > li{
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 18px;
  border: 1px solid transparent;
  -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
}

.tabs > li:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}

.tabs > .current,
.tabs > .current:hover {
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

.box{
    display:none;
}
.box.visible{
    display:block;
}

JavaScript

(function($) {
            $(function() {
              $('ul.tabs').delegate('li:not(.current)', 'click', function() {
                $(this).addClass('current').siblings().removeClass('current')
                  .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
              })

            })
        })(jQuery)