Демонстрация вкладок

by webref

HTML

<ul class="tabs-nav">
  <li><a href="#tab-1">Особенности</a></li>
  <li><a href="#tab-2">Подробности</a></li>
</ul>
<div class="tabs-stage">
  <div id="tab-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec neque nisi, dictum aliquet lectus.</div>
  <div id="tab-2">Phasellus pharetra aliquet viverra. Donec scelerisque tincidunt diam, eu fringilla urna auctor at.</div>
</div>

CSS

body {
  color: #666;
  font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.tabs {
  max-width: 538px;
}
.tabs-nav li {
  float: left;
  width: 50%;
}
.tabs-nav li:first-child a {
  border-right: 0;
  border-top-left-radius: 6px;
}
.tabs-nav li:last-child a {
  border-top-right-radius: 6px;
}
a {
  background: #eaeaed;
  border: 1px solid #cecfd5;
  color: #0087cc;
  display: block;
  font-weight: 600;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
}
a:hover {
  color: #ff7b29;
}
.tab-active a {
  background: #fff;
  border-bottom-color: transparent;
  color: #2db34a;
  cursor: default;
}
.tabs-stage {
  border: 1px solid #cecfd5;
  border-radius: 0 0 6px 6px;
  border-top: 0;
  clear: both;
  padding: 24px 30px;
  position: relative;
  top: -1px;
}

JavaScript

// Показать первую вкладку по умолчанию
$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');
  
// Изменить класс вкладки и отобразить содержимое
$('.tabs-nav a').on('click', function(event){
  event.preventDefault();
  $('.tabs-nav li').removeClass('tab-active');
  $(this).parent().addClass('tab-active');
  $('.tabs-stage div').hide();
  $($(this).attr('href')).show();
});