Simple tabs

<div class="tabs">

    <ul class="tabs__caption">
        <li class="active">1-я вкладка</li>
        <li>2-я вкладка</li>
    </ul>

    <div class="tabs__content active">
        Содержимое первого блока
    </div>
    <!-- end tab 1 -->

    <div class="tabs__content">
        Содержимое второго блока
    </div>
    <!-- end tab 2 -->

</div>
<!-- END tabs-->


<script>
$('ul.tabs__caption').on('click', 'li:not(.active)', function() {
    $(this)
    .addClass('active').siblings().removeClass('active')
    .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
});

$('ul.tabs__caption li:first-child').click();
</script>



/* scss tabs
=====================================*/
.tabs{ 
    &__content{
        display: none;
        min-height: 350px;

        &.active{
            display: block;
        }
    } 

    &__caption{
        margin-bottom: 10px; 
        list-style: none;
        padding: 0; 

        @media #{$lg}{ 
            margin-bottom: 70px;
        } 

        li{ 
            display: inline-block; 

            @media #{$md}{ 
          
            } 

            &:hover{
                 
            }

            &.active{
              
            }
 
        }
    }
}


/* OR css tabs
=====================================*/
.tabs__content {
  display: none;
  min-height: 350px;
}
.tabs__content.active {
  display: block;
}
.tabs__caption {
  margin-bottom: 50px;
  margin-top: -25px;
  list-style: none;
  padding: 0;
}
.tabs__caption li {
  display: inline-block;
}