Вкладки-Табы на jQuery и CSS

<div id="tabs"><!-- вкладки -->
        <ul>
          <li class="active"><a href="#pane1">Вкладка 1</a></li>
          <li><a href="#pane2">Вкладка 2</a></li>
          <li><a href="#pane3">Вкладка 3</a></li>
        </ul>
        <div id="panes"><!-- контейнер для панелей -->
          <!-- панель для вкладки 1 -->
          <div id="pane1" class="tab">
            <p>Текст вкладки 1 ...</p>
          </div>
          <!-- панель для вкладки 2 -->
          <div id="pane2" class="tab">
            <p>Текст вкладки 2 ...</p>
          </div>
          <!-- панель для вкладки 3 -->
          <div id="pane3" class="tab">
            <p>Текст вкладки 3 ...</p>
          </div>
        </div><!-- контейнер для панелей -->
      </div><!-- вкладки -->

<script type="text/javascript" src="{tpl_url}/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.tabify.js"></script>

<div id="tabs">

<script type="text/javascript">

                        $(document).ready(function () {
                                $('#tabs').tabify();
                        });

</script>

/* общий конейнер с вкладками */
#tabs{
      display:block;
      margin-top:20px;
      clear:both;
}
/* немаркированный список заголовка */
#tabs ul{
      display:block;
      height:auto;
      margin:0;
      padding:0;
      margin-top:10px;
      font-size: 12px;
      list-style:none;
}
/* элемент списка */
#tabs ul li {
      margin:0;
      padding:0;
      float:left;
}
/* ссылка заголовка вкладки */
#tabs ul li a {
      display:block;
      margin:0;
      margin-right:2px;
      padding:10px 15px;
      float:left;
      color: #ddd;
      background-color:#56585d;
      text-decoration:none;
      /* стили CSS3 для закругления уголков */
                 -webkit-border-top-left-radius: 8px; /* Safari, Chrome */
                -webkit-border-top-right-radius: 8px; /* Safari, Chrome */
                  -khtml-border-top-left-radius: 8px; /* KHTML */
                 -khtml-border-top-right-radius: 8px; /* KHTML */
                         -moz-border-radius-topleft: 8px; /* Firefox */
                        -moz-border-radius-topright: 8px; /* Firefox */
                                 border-top-left-radius: 8px; /* CSS3 */
                                border-top-right-radius: 8px; /* CSS3 */            

}
/* наведение мышки на вкладку */
#tabs ul li a:hover {
      color:#FFF;
      background-color:#121518;
      text-decoration:none;
}
/* активная вкладка */
#tabs ul .active a,
#tabs ul .active a:hover {
      font-weight:bold;
      color:#121518;
      background-color:#e5e5e5;
      text-decoration:none;
      border:none;
      border-bottom:2px solid #e5e5e5;
      -webkit-text-shadow: 0px 1px 1px #fff;
         -moz-text-shadow: 0px 1px 1px #fff;
              text-shadow: 0px 1px 1px #fff;

}
/* контейнер с панелями вкладок */
#tabs #panes {
      margin:0;
      padding:0;
      clear:both;
      display:block;
      background-color:#e5e5e5;
      /* стили CSS3 для закругления уголков */
               -webkit-border-radius: 8px; /* Safari, Chrome */
      -webkit-border-top-left-radius: 0px; /* Safari, Chrome */
                  -moz-border-radius: 8px; /* Firefox */
          -moz-border-radius-topleft: 0px; /* Firefox */
                       border-radius: 8px; /* CSS3 */
              border-top-left-radius: 0px; /* CSS3 */
}
/* оформление вкладок */
#tabs #panes .tab {
      margin:0;
      display:block;
      padding:20px;
      clear:both;       
}