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='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>
попробуйте сделать или обьяснить попроще пока я вас не понимаю
