JSFiddle - React, Tailwind, and code Playground

by Dmitry Nazarov

HTML

<div class="tabs1">
      <div class="tab1" data-name="profile">Профиль</div>
      <div class="tab1" data-name="quests">Вопросы</div>
      <div class="tab1" data-name="ansvers">Ответы</div>
      <div class="tab1" data-name="bookmark">Закладки</div>
      <div class="tab1" data-name="public">Публикации</div>
    </div>
    <div class="content">
      <div class="page1 page1_profile">Содержимое первой вкладки</div>
      <div class="page1 page1_quests">Содержимое второй вкладки</div>
      <div class="page1 page1_ansvers">Содержимое третьей вкладки</div>
      <div class="page1 page1_bookmark">Содержимое четвертой вкладки</div>
      <div class="page1 page1_public">Содержимое пятой вкладки</div>
    </div>

CSS

*{margin: 0;padding: 0;box-sizing: border-box;}


  .tabs1{width:100%x;font-size:0;}
  .tab1{display: inline-block;
      box-sizing: border-box;
      font-size: 14px;
      padding: 10px 15px;
     cursor: pointer;
}
 .tab1.active {
    border-bottom: 2px solid #ff7102;
}
.content {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
}
div.tabs1 {
    margin: 1em 0;
    border-bottom: 1px solid #dfdfdf;
}

JavaScript

var hash = document.location.hash;
console.log(hash);
$(document).ready(function(){
  var tabs1 = $('.tab1');
  var pages1 = $('.page1');
  if(hash){
    var name = hash.slice(1);
    console.log(name);
    tab1Activate(name);
  }else{
    tab1Activate('profile');
  }

  $('.tab1').click(function(){
    tab1Activate($(this).data('name'));
  })

  function tab1Activate(name){
    tabs1.each(function(ind, tab1){
      console.log(ind, tab1);
      if($(tab1).data('name') == name){
        $(tab1).addClass('active');
      }else{
        $(tab1).removeClass('active');
      }
    });
    pages1.each(function(ind, page1){
      $(page1).hide();
    });
    $('.page1_'+name).show();
    document.location.hash = '#'+name;
  }
})