Javascript-форум - Показать сообщение отдельно

рони · #5 (**permalink**) 16.03.2015, 18:53

zoOmer,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .tabs {
  position: relative;
}

.tabs input {
  position: absolute;
  z-index: 1000;
  left: 0px;
  top: 0px;
  opacity: 0;
}

.tabs label {
  position: relative;
  display: block;
  padding: 1.4em;
  float: left;
  background: #27ae60;
  color: #145b32;
  text-align: center;
  cursor: pointer;
}

.tabs label:after {
  content: '';
  background: #fff;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  display: block;
}

.tabs label:first-of-type {
  z-index: 4;
}

.tab-label-2 {
  z-index: 3;
}

.tab-label-3 {
  z-index: 2;
}

.tab-label-4 {
  z-index: 1;
}

.tabs input:checked + label {
  background: #fff;
  z-index: 6;
}

.content {
  position: relative;
  width: 100%;
  height: 200px;
  z-index: 5;
  overflow: hidden;
  background: #fff;
}

.content div {
  position: absolute;
  top: 0;
  padding: 1.4em;
  z-index: 1;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
  transform: translateX(4.2em);
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
  transform: translateX(0px);
  z-index: 100;
  opacity: 1;
  transition: all ease-out 0.2s 0.1s;
}

.content div h2,
.content div h3 {
  margin: 0 0 0.7em;
  color: #27ae60;
}

@keyframes "page" {
  0% {
    left: 0;
  }
  50% {
    left: 4.2em;
  }
  100% {
    left: 0;
  }
}

  </style>



<script>
$(function() {
    var inp = $(".tabs input"),
        sel = $("#selectId"),
        txt = $("#text");
    sel.change(function() {
        var i = this.selectedIndex||0;
        txt.text(this.options[i].text);
        inp.eq(--i).prop({
            "checked": true
        })
    });
    inp.click(function() {
        var i = inp.index(this);
        sel.prop({
            "selectedIndex": ++i
        }).change()
    }).filter(':checked').click()
});
</script>


</head>
<body>
  <section class="tabs">

  <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
  <label for="tab-1" class="tab-label-1" id="z1">Первая</label>


  <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  <label for="tab-2" class="tab-label-2" id="z2">Вторая</label>


  <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
  <label for="tab-3" class="tab-label-3" id="z3">Третья</label>


  <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
  <label for="tab-4" class="tab-label-4" id="z4">Четвертая </label>



  <div class="content">

    <div class="content-1">
      <p>1-я вкладка</p>
    </div>

    <div class="content-2">
      <p>2-я вкладка</p>
    </div>

    <div class="content-3">
      <p>3-я вкладка</p>
    </div>

    <div class="content-4">
      <p>4-я вкладка</p>
    </div>

  </div>

</section>

<select name="name1" onchange="vahtaChange(this)" id="selectId">
      	<option disabled="" selected="">Категории стикеров</option>
        <option value="t1">Первая</option>
        <option value="t2">Вторая</option>
        <option value="t3">Третья</option>
        <option value="t4">Четвертая</option>
    </select>
<p>Вы на вкладке <b><span id="text">0</span></b></p>

</body>


</html>