Форум

zoOmer · #1 (**permalink**) 16.03.2015, 07:03

Доброе всем)

Помогите пожалуйста с вкладками! Вот я сделал вкладки на ксс + добавил 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 · #2 (**permalink**) 16.03.2015, 07:22

http://inferusvv.ru/blog/css/14-taby...chyu-css3.html

ksa · #3 (**permalink**) 16.03.2015, 08:30

Сообщение от zoOmer

А, вот как сделать все в куче

Для "кучи" можно использовать тот же класс или особенности ДОМ-модели...

zoOmer · #4 (**permalink**) 16.03.2015, 18:12

laimas, Не не мне нужно именно те вкладки которые у меня!
ksa, Спасибо понял теперь как)

Вот как быть теперь с моим вопросом за выбор из селекта?

рони · #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>

zoOmer · #6 (**permalink**) 16.03.2015, 21:43

рони, Спасибо вам больше)

Извиняюсь за наглость но есть вопрос по данному решению.
А вот если мне нужно будет разделить вкладки по категориям вот на пример в селекте будет 2 варианта выбора в первом будет выводится одна вкладка а в втором 3 вкладки. Как можно будет такое реализовать из вашего решения?

рони · #7 (**permalink**) 16.03.2015, 22:32

zoOmer,
скрипт основан больше на вашем css, чем на значении селекта если нужны несколько вкладок тогда придётся отказаться от type="radio" - и брать значения селекта только - но

Сообщение от zoOmer

первом будет выводится одна вкладка а в втором 3 вкладки

это пока тёмный лес что там у вас на самом деле

zoOmer · #8 (**permalink**) 17.03.2015, 00:14

рони, Попытаюсь объяснить. Нужны табы Вот например есть 3 вкладки и в блоках content будут находится изображения. И еще 3 вкладки должны быть скрыты и когда выбираешь в селекте на пример Категория 2 то скрываются те 3 вкладки и отображается одна вкладка потом при выборе в селекте Категория 3 выводится 2 вкладки и опять же та категория скрывается. Как то так

рони · #9 (**permalink**) 17.03.2015, 00:30

Сообщение от zoOmer

Как то так

неа не понял ничего

zoOmer · #10 (**permalink**) 17.03.2015, 00:30

рони, Где то примерно вот так http://jsfiddle.net/w215w017/

Только в этом решении не переводит на первую вкладку при выборе из селекта.

Форум

Справочник

Discord чат

Курсы javascript