1

Доброго времени друзья! Делаю форму обратной связи со вкладками, посредством radio button в общем select у меня стал не кликабельным , в голову не приходит почему. вот ссылка на онлайн редактор http://jsbin.com/yoq/7/edit (Пункт 1 который)

*{
  box-sizing:border-box;  
}
.tabbed{
  font: 1em 'PT Sans', sans-serif;
  width: 800px;
  margin: 50px auto;
  position:relative;
}
.tabbed > input{
  display: none;
}
.tabbed > label{
  display: block;
  float: left;
  padding: 12px 20px;
  margin-right: 5px;
  cursor: pointer;
  transition: background-color .3s;
}
.tabbed > label:hover,
.tabbed > input:checked +label{
  background: #4EC6DE;
}
.tabs{
  clear:both;
}
.tabs > div{
  width: 800px;
  position:absolute;
  opacity: 0;
  border: 2px solid #4EC6DE;
  padding: 30px 30px 40px;
}
#tabNav1:checked ~ .tabs > div:nth-of-type(1),
#tabNav2:checked ~ .tabs > div:nth-of-type(2),
#tabNav3:checked ~ .tabs > div:nth-of-type(3),
#tabNav4:checked ~ .tabs > div:nth-of-type(4){
  opacity:1;
  z-index: 1000;
}
td{
  padding: 5px 10px;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.0/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="tabbed">
    <input type="radio" name='tabs' id="tabNav1" checked>
    <label for="tabNav1">Заявка</label>
    <input type="radio" name='tabs' id="tabNav2">
    <label for="tabNav2">Задать вопрос</label>
    <input type="radio" name='tabs' id="tabNav3">
    <label for="tabNav3">Заказать звонок</label>
    <input type="radio" name='tabs' id="tabNav4">
    <label for="tabNav4">Оставить отзыв</label>
    <div class="tabs">
      <div>
        <form action="">
          <table>
            <tr>
              <td>Раздел* :</td>
              <td>
                <select name="razdely">
                  <option value="fasadpanel">Фасадные панели</option>
                  <option value="sayding">Сайдинг</option>
                   <option value="soffity">Соффиты</option>
                   <option value="ventfasady">Вент. фасады</option>
                   <option value="krovlya">Кровля</option>
                   <option value="sandvich">Сэндвич панели</option>
                   <option value="vodostochka">Водосточная система</option>
                   <option value="drenazh">Дренажные каналы</option>
                   <option value="bvd">Быстровозводимые дома</option>
                   <option value="angary">Ангары</option>
                   <option value="profnastil">Профнастил</option>
                   <option value="profil">Профиль</option>
                   <option value="fibrovolokno">Фиброволокно</option>
                   <option value="parogidro">Парогидроизоляция</option>
                   <option value="zabori">Заборы</option>
                   <option value="metall">Металл</option>
                   <option value="osb">OSB-3</option>
                </select>
              </td>
              <td>Город :</td>
              <td>
                <select name="goroda" id="">
                  <option value="">Алматы</option>
                  <option value="">Астана</option>
                  <option value="">Шымкент</option>
                  <option value="">Караганда</option>
                  <option value="">Актобе</option>
                  <option value="">Тараз</option>
                  <option value="">Павлодар</option>
                  <option value="">Усть-Каменогорск</option>
                  <option value="">Семей</option>
                  <option value="">Костанай</option>
                  <option value="">Уральск</option>
                  <option value="">Петропавловск</option>
                  <option value="">Кызылорда</option>
                  <option value="">Атырау</option>
                  <option value="">Актау</option>
                  <option value="">Темиртау</option>
                  <option value="">Кокшетау</option>
                  <option value="">Талдыкорган</option>
                  <option value="">Экибастуз</option>
                  <option value="">Рудный</option>
                  <option value="">Другой...</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Имя* :</td>
              <td><input type="text" value='Иванов Иван Иванович'></td>
              <td>Телефон* :</td>
              <td><input type="text" value='+7 727 390-26-60'</td>
            </tr>
            <tr>
              <td>E-mail* :</td>
              <td><input type="text" value="[email protected]"></td>
            </tr>
            <tr>
              <td>Сообщение* :</td>
            </tr>
            <tr>
              <td>
                <textarea name="" id="" cols="25" rows="5">Здравствуйте</textarea>               </td>
              <td colspan='2'>
                Вы можете прикрепить к заявке файл(не более 3 мегабайт)<input type="file" name='f_file'></td>
             </tr>
          </table>
        </form>
      </div>
      <div>
        <h1>Задать вопрос</h1>
      </div>
      <div>
        <h1>Заказать звонок</h1>
      </div>
      <div>
        <h1>Оставить отзыв</h1>
      </div>
    </div>
  </div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

3 ответа 3

1

Посмотреть исправленный пример

Объясняю на пальцах.
У вас 4 блока. Грубо говоря, один под одним.
Что вы делаете с помощью CSS?
Меняете прозрачность блока. Заметьте, не убираете, а делаете прозрачным. Соответственно, блок никуда (как слой) не исчезает. Просто теперь можно смотреть сквозь него. Следовательно, вы думаете, что кликнули на блок, который под ним, а кликаете по этому же самому блоку.

Вот пример, чтобы было проще понять:
Вы увидели на витрине пироженое. Хотите взять. Но что за напасть? Ваша рука натыкается на невидимую преграду. В данном случае, стекло. Так и тут. Как это поправить?

Замените opacity: 0; и opacity: 1; на display: none; и display: block; соответственно и все заработает.

1
  • спасибо)родина вас не забудет
    – Сашка
    21 фев 2014 в 11:58
0

Поставил Z-index 1000 заработало)

1
  • 1
    Теперь вы столкнетесь, скорее всего, с тем, что селекты в других дивах будут некликабельные по той же причине, что и ранее.
    – VenZell
    19 фев 2014 в 13:28
0

У вас дивы, в которых контент, располагаются друг над другом, и див с селектом на самом дне. Поэтому когда вы кликаете по этим дивам, вы всегда кликаете только по верхнему. Делать табы через прозрачные дивы не самая лучшая идея, попробуйте скрывать контент через display: none;.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.