slide вкладка

табы картинками через дивы. html css jquery

by Denis Tverdokhlebov

HTML

<div class="service-list">

  <!-- секция слайда -->
  <div class="service-item one_img_obj">

    <a href="#" class="service-show">
      <img src="http://yt3.ggpht.com/-RTyKAOjYsMI/AAAAAAAAAAI/AAAAAAAAAAA/JmkY1AGGa68/s240-c-k-no/photo.jpg">
    </a>

    <section>
      <h6>Юрист (регистрация юридических лиц и индивидуальных предпринимателей)</h6>
      <p class="fw400">Обязанности:</p>
      <ul>
        <li>Консультирование клиентов по услугам компании (регистрация юридических лиц, внесение изменений);</li>
        <li>Подготовка документов для проведения регистрационных действий (регистрация ООО, регистрация ИП, изменения).</li>
        <li>Взаимодействие с помощниками юристов, контроль их работы.</li>
        <li>Сопровождение выполнения заказа на всех этапах.</li>
      </ul>
    </section>
  </div>
  <!-- секция слайда -->


  <!-- секция слайда -->
  <div class="service-item two_img_obj">

    <a href="#" class="service-show">
      <img src="http://yt3.ggpht.com/-RTyKAOjYsMI/AAAAAAAAAAI/AAAAAAAAAAA/JmkY1AGGa68/s240-c-k-no/photo.jpg">
    </a>
    
    <section class="slide_content_2">
      <h6>Юрист (регистрация юридических лиц и индивидуальных предпринимателей)</h6>
      <p class="fw400">Обязанности:</p>
      <ul>
        <li>Консультирование клиентов по услугам компании (регистрация юридических лиц, внесение изменений);</li>
        <li>Подготовка документов для проведения регистрационных действий (регистрация ООО, регистрация ИП, изменения).</li>
        <li>Взаимодействие с помощниками юристов, контроль их работы.</li>
        <li>Сопровождение выполнения заказа на всех этапах.</li>
      </ul>
    </section>
  </div>
  <!-- секция слайда -->


  <!-- секция слайда -->
  <div class="service-item free_img_obj">

    <a href="#" class="service-show">
      <img src="http://yt3.ggpht.com/-RTyKAOjYsMI/AAAAAAAAAAI/AAAAAAAAAAA/JmkY1AGGa68/s240-c-k-no/photo.jpg">
    </a>
    
    <section class="slide_content_3">
      <h6>Юрист (регистрация...

CSS

.service-list {
    margin:0 auto;
    position: relative;
}

.service-item.one_img_obj {
    float: left;
    margin-right: 20px;
    position: absolute;
}

.service-item.two_img_obj {
    float: left;
    left: 270px;
    position: absolute;
}

.service-item.free_img_obj {
    clear: right;
    left: 540px;
    position: absolute;
}

.slide_content_2 {
    left: -270px;
    position: absolute;
    width: 890px;
}

.slide_content_3 {
    left: -540px;
    position: absolute;
}

JavaScript

$(function() {
      var caption = $(".service-list").find(".service-show"),
        content = $(".service-item").find("section").hide();

      caption.click(function(e) {
        e.preventDefault();
        var activeContent = content.filter('.active');
        activeContent.removeClass('active').slideUp(600);
        caption.removeClass('an_back');
        if ($(this).next(content).is(activeContent)) return;
        $(this).next(content).addClass('active').slideDown(600);
        $(this).addClass('an_back');
      });
    });