Горизонтальные вкладки на JQuery с эффектом плавного перехода.

HTML разметка

Структура практически не изменилась. Единственное отличие от разметки вкладок из прошлого урока заключается в том, что теперь блоки с описанием вкладок дополнительно помещены в контейнер .tab-panels

<div class="tab-box">
    <ul class="tab-nav">
        <li><a href="#t1">Вкладка 1</a></li>
        <li><a href="#t2">Вкладка 2</a></li>
        <li><a href="#t3">Вкладка 3</a></li>
    </ul>
    <div class="tab-panels">
        <div id="t1">Описание первой вкладки</div>
        <div id="t2">Описание второй вкладки</div>
        <div id="t3">Описание третьей вкладки</div>
    </div>
</div>
 

CSS стили

.tab-panels{
  position:relative;
  height:280px;
  border:solid 1px #cccccc;
  background:#fcfcfc;
}
.tab-nav{
  margin:0;
  padding:0;
  height:26px;
  list-style:none;
}
.tab-nav li{
  float:left;
  margin-right:1px;
  background:#999;
}
.tab-nav li a{
  display:inline-block;
  padding:0 10px;
  font:normal 12px/26px Arial, Helvetica, sans-serif;
  color:#fff;
  text-decoration:none;
}
.tab-nav li a:hover{
  background:#777;
}
.tab-nav li.select a{
  background:#bbb;
}
.tab-nav .active{
  display:inline-block;
}
.tab-panels>div{
  position:absolute;
  top:0;
  left:0;  
  padding:10px 10px 0;
  height:260px;
  overflow:hidden;
}

Скрипт

$(function(){
  $('.tab-nav li:first').addClass('select');                                                                 // Первой вкладке добавляетсякласс select
  $('.tab-box .tab-panels>div').css('opacity',0).filter(":first").css('opacity',1);                          // Всем блокам кроме первого задается прозрачность 0
  $('.tab-nav a').click(function(){                                                                          // При клике на вкладку
      $('.tab-box .tab-panels>div').animate({'opacity':0},200).filter(this.hash).animate({'opacity':1},200); // - блок с описанием текущей вкладки плавно становится видимым
      $('.tab-nav li').removeClass('select');                                                                // - удаляется класс 'select' у активной ранее вкладки
      $(this).parent().addClass('select');                                                                   // - добавляется класс 'select' для выбранной вкладки        
      return (false);                                                                                        // - прерывается обработка события onClick 
  })  
})

Получился такой блок с плавным переходом между вкладками.

Текст второго окна

Текст третьего окна



>> JQuery. Вкладки (1/2)

Комментарии  

0 #1 profile 01.11.2018 17:52
Need cheap hosting? Try webhosting1st, just $10 for an year.

Цитировать

Добавить комментарий


Защитный код
Обновить