Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.03.2015, 07:03
Кандидат Javascript-наук
Отправить личное сообщение для zoOmer Посмотреть профиль Найти все сообщения от zoOmer
 
Регистрация: 21.05.2013
Сообщений: 131

Вкладки на 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';

Заранее сенькю)
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2015, 07:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

http://inferusvv.ru/blog/css/14-taby...chyu-css3.html
Ответить с цитированием
  #3 (permalink)  
Старый 16.03.2015, 08:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от zoOmer
А, вот как сделать все в куче
Для "кучи" можно использовать тот же класс или особенности ДОМ-модели...
Ответить с цитированием
  #4 (permalink)  
Старый 16.03.2015, 18:12
Кандидат Javascript-наук
Отправить личное сообщение для zoOmer Посмотреть профиль Найти все сообщения от zoOmer
 
Регистрация: 21.05.2013
Сообщений: 131

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

Вот как быть теперь с моим вопросом за выбор из селекта?
Ответить с цитированием
  #5 (permalink)  
Старый 16.03.2015, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Открытие вкладки по клику на 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>

Последний раз редактировалось рони, 16.03.2015 в 19:00.
Ответить с цитированием
  #6 (permalink)  
Старый 16.03.2015, 21:43
Кандидат Javascript-наук
Отправить личное сообщение для zoOmer Посмотреть профиль Найти все сообщения от zoOmer
 
Регистрация: 21.05.2013
Сообщений: 131

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

Извиняюсь за наглость но есть вопрос по данному решению.
А вот если мне нужно будет разделить вкладки по категориям вот на пример в селекте будет 2 варианта выбора в первом будет выводится одна вкладка а в втором 3 вкладки. Как можно будет такое реализовать из вашего решения?
Ответить с цитированием
  #7 (permalink)  
Старый 16.03.2015, 22:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

zoOmer,
скрипт основан больше на вашем css, чем на значении селекта если нужны несколько вкладок тогда придётся отказаться от type="radio" - и брать значения селекта только - но
Сообщение от zoOmer
первом будет выводится одна вкладка а в втором 3 вкладки
это пока тёмный лес что там у вас на самом деле
Ответить с цитированием
  #8 (permalink)  
Старый 17.03.2015, 00:14
Кандидат Javascript-наук
Отправить личное сообщение для zoOmer Посмотреть профиль Найти все сообщения от zoOmer
 
Регистрация: 21.05.2013
Сообщений: 131

рони, Попытаюсь объяснить. Нужны табы Вот например есть 3 вкладки и в блоках content будут находится изображения. И еще 3 вкладки должны быть скрыты и когда выбираешь в селекте на пример Категория 2 то скрываются те 3 вкладки и отображается одна вкладка потом при выборе в селекте Категория 3 выводится 2 вкладки и опять же та категория скрывается. Как то так
Ответить с цитированием
  #9 (permalink)  
Старый 17.03.2015, 00:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от zoOmer
Как то так
неа не понял ничего
Ответить с цитированием
  #10 (permalink)  
Старый 17.03.2015, 00:30
Кандидат Javascript-наук
Отправить личное сообщение для zoOmer Посмотреть профиль Найти все сообщения от zoOmer
 
Регистрация: 21.05.2013
Сообщений: 131

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите реализовать Вкладки Remka jQuery 0 03.05.2011 23:28
Люди помогите! Как отключить css для ОПЕРЫ МИНИ??? griha787 Элементы интерфейса 1 13.04.2011 20:10
Как подменять ФАЙЛ CSS при клике нассылку!!!! СРОЧНО ПОМОГИТЕ. pavdin Общие вопросы Javascript 4 02.12.2010 20:44
Помогите восстановить CSS файл!!! в момент сохранения вырубился комп Randomizer (X)HTML/CSS 2 26.10.2010 11:45
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 23:50