Переключение вкладок не работает

@Ksenksen · Регистрация: 30.10.2012

Студворк — интернет-сервис помощи студентам

Есть код, который должен переключать видимость блоков див по нажатию кнопок меню, но почему-то этого не происходит /: Самостоятельно ошибку обнаружить не удалось, прошу помочь.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
body{
margin: 0;
padding: 0;
background: rgb(255, 255, 255);
font: arial;
}
 
.center{
width: 100%;
margin: 0 auto;
background: url(img/head.jpg);
height: 100px;
color:fff;
}
 
.menu{
padding-left: 50%;
margin-left:-450px;
}
 
.menu > input {
display: none;
}
 
.menu > label{
position: relative;
display: block;
float: left;
padding: 80px 33px;
cursor: pointer;
transition: color .4s;
}
 
.menu > label:hover,
.menu > input:checked + label {
color: rgb(100, 100, 100);
text-shadow: 0 1px 0 rgb(210,210,210);
}
 
.menu > label:active{
color: rgb(200, 200, 200);
}
 
.content{
clear: both;
}
 
.content > div{
position: absolute;
opacity: 0;
}
 
.center #nav-1:checked ~ .content .img2, 
.center #nav-2:checked ~ .content .img3, 
.center #nav-3:checked ~ .content .img4, 
.center #nav-4:checked ~ .content .img5, 
.center #nav-5:checked ~ .content .img6, 
.center #nav-6:checked ~ .content .img7, {
opacity: 1;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
HTML
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" 
href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.0.1/normal.."/>
 
</head>
<body>
<div class="center">
<div class="menu">
<input type="radio" name="button" id="nav-1">
<label for="nav-1">ГЛАВНАЯ</label>
<input type="radio" name="button" id="nav-2">
<label for="nav-2">МАСТЕРА</label>
<input type="radio" name="button" id="nav-3">
<label for="nav-3">ПРОДУКЦИЯ</label>
<input type="radio" name="button" id="nav-4">
<label for="nav-4">ПРЕЙСКУРАНТ</label>
<input type="radio" name="button" id="nav-5">
<label for="nav-5">АКЦИИ</label>
<input type="radio" name="button" id="nav-6">
<label for="nav-6">КОНТАКТЫ</label>
</div>
</div>
<div class="content">
<img src="img/1.png" width="100%">
<div class="img2">
<img src="img/2.png" width="100%">
</div>
<div class="img3">
<img src="img/3.png" width="100%">
</div>
<div class="img4">
<img src="img/4.png" width="100%">
</div>
<div class="img5">
<img src="img/5.png" width="100%">
</div>
<div class="img6">
<img src="img/6.png" width="100%">
</div>
<div class="img7">
<img src="img/7.png" width="100%">
</div>
</div>
<script
src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0...">
</script>
</body>
</html>

@Academik · 17.04.2013, 15:27

Обычно это делается при помощи табов.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	17.04.2013, 15:27
	Обычно это делается при помощи табов. 0