Вкладки на CSS ПОМОГИТЕ
Доброе всем)
Помогите пожалуйста с вкладками! Вот я сделал вкладки на ксс + добавил js чтоб они скрывались и добавил селект вот надо чтоб после выбора из селекта переходило (перелистывало) на выбранную вкладку. Сейчас меняется только кнопка а вот содержимое нет... Битый час ломаю голову как поймать это событие когда жмешь на lebel for. Вот вкладки http://jsfiddle.net/5ouj8xzf/ Заранее большое спасибо) З,Ы, Если вам не лень подскажите как на jq прописать одно css свойство для нескольких дивов с определенными айди? К примеру JS document.getElementById('test').style.display = 'block'; а, в JQ $("#test").css('display':'none'); как то так) А, вот как сделать все в куче чтоб не было вот так document.getElementById('z1').style.display = 'block'; document.getElementById('z2').style.display = 'none'; document.getElementById('z3').style.display = 'none'; document.getElementById('z4').style.display = 'none'; Заранее сенькю) |
|
Цитата:
|
laimas, Не не мне нужно именно те вкладки которые у меня!
ksa, Спасибо понял теперь как) Вот как быть теперь с моим вопросом за выбор из селекта? |
Открытие вкладки по клику на tab или по выбору в select
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>
|
рони, Спасибо вам больше)
Извиняюсь за наглость но есть вопрос по данному решению. А вот если мне нужно будет разделить вкладки по категориям вот на пример в селекте будет 2 варианта выбора в первом будет выводится одна вкладка а в втором 3 вкладки. Как можно будет такое реализовать из вашего решения? |
zoOmer,
скрипт основан больше на вашем css, чем на значении селекта если нужны несколько вкладок тогда придётся отказаться от type="radio" - и брать значения селекта только - но Цитата:
|
рони, Попытаюсь объяснить. Нужны табы Вот например есть 3 вкладки и в блоках content будут находится изображения. И еще 3 вкладки должны быть скрыты и когда выбираешь в селекте на пример Категория 2 то скрываются те 3 вкладки и отображается одна вкладка потом при выборе в селекте Категория 3 выводится 2 вкладки и опять же та категория скрывается. Как то так
|
Цитата:
|
рони, Где то примерно вот так http://jsfiddle.net/w215w017/
Только в этом решении не переводит на первую вкладку при выборе из селекта. |
| Часовой пояс GMT +3, время: 19:40. |