Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
  <style type='text/css'>.custom-select{right:1%;position:absolute;top:78%;margin-top:18px}
  .custom-select select{width:auto;margin:0;padding:8px;outline:none;cursor:pointer;border:none;border-radius:0;background:#e5e9ed;color:rgba(154,154,154,0.6);-webkit-appearance:none;-moz-appearance:none;width:165px}
  .custom-select select::-ms-expand{display:none}
  .custom-select:after{position:absolute;top:15px;right:1em;width:0;height:0;padding:0;content:'';border-left:.25em solid transparent;border-right:.25em solid transparent;border-top:0.375em solid rgba(154,154,154,0.6);pointer-events:none}
  .custom-select select{padding-right:1.75em}
  .tabs{position:relative;background:#dce1e6;width:505px;height:259px}
  .tabs input{position:absolute;z-index:1000;left:0px;top:0px;opacity:0}
  .tabs label{position:relative;display:block;padding:5px;float:left;background:#dce1e6;text-align:center;cursor:pointer}
  .tabs label:hover{background:#e5e9ed}
  .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:#ebeef2;z-index:6}
  .content{position:relative;width:100%;height:170px;z-index:5;overflow:auto;overflow-x:hidden;background:#ebeef2}
  .content div{position:absolute;top:0;padding:10px;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,.tabs input.tab-selector-5:checked~.content .content-5,.tabs input.tab-selector-6:checked~.content .content-6{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%,100%{left:0}
  50%{left:4.2em}
  }
  </style>
 
 
 
<script>
$(function() {
    var inp = $(".tabs input"),
        sel = $("#selectId"),
        txt = $("#text"),
        lab = $(".tabs label"),
        obj = {1 : [0,1,2],2:[3],3:[4,5]};
    sel.change(function() {
        var i = this.selectedIndex||0;
        var arr = obj[this.value];
        txt.text(this.options[i].text);
        lab.hide();
        inp.hide()
        .filter(function(i) {
        var ok = $.inArray(i, arr) != -1;
        ok && lab.eq(i).show() ;
        return ok})
        .show();
        inp.eq(arr[0]).prop({
            "checked": true
        })
    }).val(1).change();
 
});
</script>
</head>
<body>
  <section class="tabs">
  <!-- Panel 1 -->
  <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">
  Вкладка 1
  </label>
 
  <!-- Panel 2 -->
  <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  <label for="tab-2" class="tab-label-2" id="z2">
  Вкладка 2
  </label>
 
  <!-- Panel 3 -->
  <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
  <label for="tab-3" class="tab-label-3" id="z3">
  Вкладка 3
  </label>
 
  <!-- Panel 4 -->
  <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
  <label for="tab-4" class="tab-label-4"   id="z4">
  Вкладка 4
  </label>
 
    <!-- Panel 5 -->
  <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
  <label for="tab-5" class="tab-label-5"   id="z5">
    Вкладка 5
  </label>
 
    <!-- Panel 6 -->
  <input id="tab-6" type="radio" name="radio-set" class="tab-selector-6" />
  <label for="tab-6" class="tab-label-6"   id="z6">
    Вкладка 6
  </label>
    <p class="custom-select">
    <select name="name1" onchange="categories(this)" id="selectId">
        <option disabled="" selected="">Категории</option>
        <option value="1" name="radio-set">Категория 1</option>
        <option value="2">Категория 2</option>
        <option value="3">Категория 3</option>
    </select>
</p><p style="left: 2%;  position: absolute;top: 81%; color: rgba(154, 154, 154, 0.6);">Вы в категории: <b><span id="text"></span></b></p>
 
 <div class="content">
 
   <div class="content-1">
   Вкладка 1
   </div>
   <div class="content-2">
   Вкладка 2
   </div>
 
   <div class="content-3">
   Вкладка 3
   </div>
 
   <div class="content-4">
   Вкладка 4
   </div>
 
   <div class="content-5">
   Вкладка 5
   </div>
 
   <div class="content-6">
   Вкладка 6
   </div>
  </div>
 
</section>
</body>
 
 
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers