логирование

by Denis Tverdokhlebov

HTML

<div class="tabs">

  <ul class="tabs__caption">
    <li class="active">Sign in</li>
    <li>Register</li>
  </ul>

  <div class="tabs__content  active">
    <form name="test" method="post" action="input1.php">
      <p>Login</p>
      <input type="text" size="40">

      <p>Password</p>
      <input type="text" size="40">
    </form>
  </div>

  <div class="tabs__content">
    <form name="test" method="post" action="input1.php">
      <p>Phone</p>
      <input type="text" size="40">

      <p>Login</p>
      <input type="text" size="40">

      <p>Password</p>
      <input type="text" size="40">

      <p>Password</p>
      <input type="text" size="40">
    </form>
  </div>





</div>
<!-- .tabs -->

CSS

* {
  margin: 0;
  padding: 0;
}
   
body {
  margin: 30px;
  font: 13px/1.4 Arial, sans-serif;
}

a {
  color: #0094D6;
}

a:hover {
  text-decoration: none;
}

p {
  padding: 7px 0;
}

h1 {
  font-size: 21px;
  font-weight: normal;
  margin: 0 0 30px;
}

h2 {
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 25px;
}

body {
  background: #F6F6F6;
}

.text {
  max-width: 700px;
  margin: 0 0 30px;
  background: #FFF;
  border: 2px solid #7DCA86;
  border-radius: 5px;
  padding: 7px 15px;
  box-sizing: border-box;
}

.tabs {
  max-width: 700px;
  margin: 0 0 30px;
}

.tabs__caption {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  position: relative;
  margin: -1px 0 0 -1px;
}

/* .tabs__caption li:last-child:before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: -2px;
    z-index: -1;
    border-bottom: 1px solid #c2591a;
} */

/* .tabs__caption:after {
    content: '';
    position: absolute;
    left: 23%;
    bottom: -5px;
    border: 6px solid transparent;
    border-bottom: 7px solid #c2591a;
    display: table;
    clear: both;
} */
.tabs__caption li {
    padding: 9px 15px;
    margin: 1px 0 0 1px;
    color: #000000;
    position: relative;
    text-align: center;
}

.tabs__caption li:not(.active) {
  cursor: pointer;
  border-bottom: 1px solid #c2591a;
}

.tabs__caption li:not(.active):hover {

}

.tabs__caption .active {
    color: #000;
    border-bottom: 1px solid #c2591a;
}
.tabs__caption .active::before, .tabs__caption .active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0px;
    border: 6px solid transparent;
    border-bottom: 7px solid #c2591a;
    display: table;
    clear: both;
}
.tabs__caption .active:after {
    border-bottom: 9px solid white;
    bottom: -3px;
}
/* .tabs__caption .active:after {
    content: '';
    position: absolute;
    bottom: -5px;
   ...

JavaScript

(function($) {
  $(function() {

    $('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');
    });

  });
})(jQuery);