NULLED555
Хранитель порядка
- Регистрация
- 19 Июн 2013
- Сообщения
- 393
- Реакции
- 543
- Автор темы
- #1
Всем привет,
есть скрипт простых вкладок, код:
Как выглядит:
Задача:
выделить цветом активный на данный момент пункт меню (как на фото). При наведении ве OK^ нужно также сделать активный пункт. Подскажите как это можно сделать?
есть скрипт простых вкладок, код:
Код:
<style>
.tab{cursor: pointer; display:block; padding: 18px; border-bottom: 1px solid #fff;}
.tab:hover{background-color: #FFF8DC;}
.tabs_color{background-color: #EFEFEF;}
.panel,.radio{display:none;}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel,
#four:checked ~ .panels #four-panel,
#five:checked ~ .panels #five-panel,
#six:checked ~ .panels #six-panel,
#seven:checked ~ .panels #seven-panel,
#eight:checked ~ .panels #eight-panel,
#nine:checked ~ .panels #nine-panel,
#ten:checked ~ .panels #ten-panel
{display:block;}
</style>
<div class="container">
<div class="row">
<input class="radio" id="one" name="group" type="radio" checked>
<input class="radio" id="two" name="group" type="radio">
<input class="radio" id="three" name="group" type="radio">
<input class="radio" id="four" name="group" type="radio">
<input class="radio" id="five" name="group" type="radio">
<input class="radio" id="six" name="group" type="radio">
<input class="radio" id="seven" name="group" type="radio">
<div class="tabs col-md-3">
<div class="tabs_color">
<label class="tab" id="one-tab" for="one">Первый пункт</label>
<label class="tab" id="two-tab" for="two">Второй пункт</label>
<label class="tab" id="three-tab" for="three">Третий пункт</label>
<label class="tab" id="four-tab" for="four">Четвертый пункт</label>
<label class="tab" id="five-tab" for="five">Пятый пункт</label>
<label class="tab" id="six-tab" for="six">Шестой пункт</label>
<label class="tab" id="seven-tab" for="seven">Седьмой пункт</label>
</div>
</div>
<div class="panels col-md-9">
<div class="panel" id="one-panel"><p>первый блок</p></div>
<div class="panel" id="two-panel"><p>второй блок</p></div>
<div class="panel" id="three-panel"><p>третий блок</p></div>
<div class="panel" id="four-panel"><p>четвертый блок</p></div>
<div class="panel" id="five-panel"><p>пятый блок</p></div>
<div class="panel" id="six-panel"><p>шестой блок</p></div>
<div class="panel" id="seven-panel"><p>седьмой блок</p></div>
</div>
</div>
</div>
Как выглядит:
Задача:
выделить цветом активный на данный момент пункт меню (как на фото). При наведении ве OK^ нужно также сделать активный пункт. Подскажите как это можно сделать?