С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.92/25: Рейтинг темы: голосов - 25, средняя оценка - 4.92
0 / 0 / 0
Регистрация: 10.11.2018
Сообщений: 63
1

Открыть/закрыть DIV по нажатию

25.11.2018, 23:14. Показов 4559. Ответов 9
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Мучаюсь уже несколько часов, нужно:
1) При нажатии на картинку чтобы открылся скрытый блок DIV.
2) При нажатии на открывшийся блок он закрылся.
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
53
54
55
56
57
58
59
60

<body>
    <div class="zadanie">Наше подсознание таит в себе много неизведанного и неожиданного, даже для нас самих. Чтобы узнать, что вы за человек на самом деле, и какова ваша жизненная цель, предлагаем пройти этот забавный тест. Выберите фигуру, которая нравится вам больше всего!</div>
   <div class="flex-1">
        <div class="img-1" onclick="openbox('box'); return false"></div>
        <div class="img-2"></div>
        <div class="img-3"></div>
   </div>
      <div class="flex-2">
        <div class="img-4"></div>
        <div class="img-5"></div>
        <div class="img-6"></div>
   </div>
   <div class="flex-3">
        <div class="img-7"></div>
        <div class="img-8"></div>
        <div class="img-9"></div>
   </div>
   
   
   <script>
       function openbox(box) {
        display.document.getElementsByClassName("test-1").style.display;
           if (display == 'none') {
               document.getElementsByClassName(test-1).style.display = 'block';
               else {
                  document.getElementsByClassName(test-1).style.display = 'none';
               }
           }
       }
    </script>
    
    
<div class="test-1" id="1" style="display: none">
    Дела обстоят не очень хорошо… Вы — гедонист, и ваша основная цель — наслаждаться жизнью, вкушая все ее блага и наслаждения. Вы не просто любите вкусно есть, придаваться плотским утехам и одеваться в лучшие наряды, для вас это — смысл жизни. Но в какой-то момент вам придется заплатить за свои проступки. Умерьте свой пыл, чтобы после не жалеть о содеянном.   
</div>
<div class="test-2" id="2" style="display: none">
    Вы — реинкарнация Супермена. Вы пришли в мир, чтобы делать добро. Ваша способность жертвовать собой ради других просто поражает! Вы самый дружелюбный, отзывчивый и миролюбивый человек. Мир ценит все, что вы делаете для него!  
</div>
<div class="test-3" id="3" style="display: none">
    Вы — прирожденный учитель. Вы много знаете и охотно делитесь своим опытом с другими. Вы считаете, что главный источник всех бед — глупость. Обучая других, вы делаете этот мир чуточку лучше. Возможно, в одиночку вам не удастся избавить человечество от невежества, но именно такова ваша цель.
</div>
<div class="test-4" id="4" style="display: none">
    Вы — страстный и очень обаятельный человек. Больше всего вы любите кружить голову противоположному полу. Вам нравится соблазнять, и вы действительно профи в этом. Без внимания вы просто рискуете завянуть. Но будьте осторожны — когда-нибудь кто-то может разбить и ваше сердце.
</div>
<div class="test-5" id="5" style="display: none">
    Как бы ужасно это ни звучало, но вы пришли в этот мир, чтобы быть добычей. В мире львов вы — газель. Вы наивный и открытый человек, именно поэтому так часто попадаете в неприятные ситуации. Возможно, в следующей жизни вы получите награду за все ваши прошлые и будущие жертвы.
</div>
<div class="test-6" id="6" style="display: none">
    У вас много друзей, вы любите быть в центре внимания. Можете легко найти общий язык с кем угодно и непринужденно чувствуете себя в любом окружении. Ваша цель — дарить людям радость!
</div>
<div class="test-7" id="7" style="display: none">
    Вы — боец. Вы не из тех, кто боится состязаний и соперничества. Как только кто-то бросает вам вызов, ваши глаза загораются азартом. Ваша цель — побеждать! Из вас получился бы отличный спортсмен или бизнесмен.
</div>
<div class="test-8" id="8" style="display: none">
    Вы — творческий и неординарный человек. Ваше мнение часто не сходится с мнением большинства. Но вы привыкли быть белой вороной и не испытываете дискомфорта, связанного с этим. Ваша цель — нести в мир передовые идеи. Когда-нибудь человечество по достоинству оценит ваш вклад в культуру, философию или искусство.  
</div>
<div class="test-9" id="9" style="display: none">
    Вы — человек довольно традиционных взглядов. Вы не гонитесь за переменчивой модой, а в жизни ищите стабильность и надежную опору. Ваша главная цель — воспитать детей, построить дом и просто быть достойным человеком. Что ж, это похвально, тем более, что у вас уже неплохо получается!
</div>
</body>
Я уже начал писать скрипт, но он не работает

Добавлено через 57 секунд
Если я нажму на img-1 картинку - у меня должен открыться блок test-1
И так далее

Добавлено через 4 минуты
Помогите разобраться..
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 25.11.2018, 23:14
Ответы с готовыми решениями:

Закрыть нужный DIV, а не по очереди
&lt;div class=&quot;page&quot;&gt;// 1-ый див Текст &lt;div&gt; // 2-й див текст &lt;/div&gt; // Закрытие его...

Скрывать div по нажатию на radio
Допустим образно в html есть &lt;div id=&quot;quiz1&quot;&gt; &lt;input type=&quot;radio&quot; value=&quot;Ответ1&quot;&gt; ...

Переход на страничку по нажатию на div
Добрый вечер! Как сделать переход по ссылке по нажатию на элемент div ? Нашёл такой вот...

Открыть div по клику (нюанс)
&lt;script type=&quot;text/javascript&quot;&gt; function pokaz(){ var vid =...

9
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
25.11.2018, 23:39 2
WitcherAlex, немножко в верстке поменяем, чтобы кода меньше было - https://codepen.io/qwerty_wasd/pen/NEzpyX
Скрипт лучше расположить перед закрывающим тегом </boby>
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

<div class="zadanie">Наше подсознание таит в себе много неизведанного и неожиданного, даже для нас самих. Чтобы узнать, что вы за человек на самом деле, и какова ваша жизненная цель, предлагаем пройти этот забавный тест. Выберите фигуру, которая нравится вам больше всего!</div>
<div class="flex-1">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>
<div class="flex-2">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>
<div class="flex-3">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>
<div class="test">Дела обстоят не очень хорошо… Вы — гедонист, и ваша основная цель — наслаждаться жизнью, вкушая все ее блага и наслаждения. Вы не просто любите вкусно есть, придаваться плотским утехам и одеваться в лучшие наряды, для вас это — смысл жизни. Но в какой-то момент вам придется заплатить за свои проступки. Умерьте свой пыл, чтобы после не жалеть о содеянном.</div>
<div class="test">Вы — реинкарнация Супермена. Вы пришли в мир, чтобы делать добро. Ваша способность жертвовать собой ради других просто поражает! Вы самый дружелюбный, отзывчивый и миролюбивый человек. Мир ценит все, что вы делаете для него!</div>
<div class="test">Вы — прирожденный учитель. Вы много знаете и охотно делитесь своим опытом с другими. Вы считаете, что главный источник всех бед — глупость. Обучая других, вы делаете этот мир чуточку лучше. Возможно, в одиночку вам не удастся избавить человечество от невежества, но именно такова ваша цель.</div>
<div class="test">Вы — страстный и очень обаятельный человек. Больше всего вы любите кружить голову противоположному полу. Вам нравится соблазнять, и вы действительно профи в этом. Без внимания вы просто рискуете завянуть. Но будьте осторожны — когда-нибудь кто-то может разбить и ваше сердце.</div>
<div class="test">Как бы ужасно это ни звучало, но вы пришли в этот мир, чтобы быть добычей. В мире львов вы — газель. Вы наивный и открытый человек, именно поэтому так часто попадаете в неприятные ситуации. Возможно, в следующей жизни вы получите награду за все ваши прошлые и будущие жертвы.</div>
<div class="test">У вас много друзей, вы любите быть в центре внимания. Можете легко найти общий язык с кем угодно и непринужденно чувствуете себя в любом окружении. Ваша цель — дарить людям радость!</div>
<div class="test">Вы — боец. Вы не из тех, кто боится состязаний и соперничества. Как только кто-то бросает вам вызов, ваши глаза загораются азартом. Ваша цель — побеждать! Из вас получился бы отличный спортсмен или бизнесмен.</div>
<div class="test">Вы — творческий и неординарный человек. Ваше мнение часто не сходится с мнением большинства. Но вы привыкли быть белой вороной и не испытываете дискомфорта, связанного с этим. Ваша цель — нести в мир передовые идеи. Когда-нибудь человечество по достоинству оценит ваш вклад в культуру, философию или искусство.</div>
<div class="test">Вы — человек довольно традиционных взглядов. Вы не гонитесь за переменчивой модой, а в жизни ищите стабильность и надежную опору. Ваша главная цель — воспитать детей, построить дом и просто быть достойным человеком. Что ж, это похвально, тем более, что у вас уже неплохо получается!</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11

let opElem = {
  image: document.getElementsByClassName('img'),
  test: document.getElementsByClassName('test')
}
document.body.addEventListener('click', e => {
  if (e.target.classList.contains('img')) {
    [...opElem.test].forEach(el => el.style.display = 'none');
    opElem.test[[...opElem.image].indexOf(e.target)].style.display = "block";
  }
  if (e.target.classList.contains('test')) e.target.style.display = 'none';
});
0
0 / 0 / 0
Регистрация: 10.11.2018
Сообщений: 63
25.11.2018, 23:54  [ТС] 3
Qwerty_Wasd, Вау, заработало, вы гений! Только у меня там картинки разные, мне надо 9 раз прописывать скрипт? Или как лучше это сделать?
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
26.11.2018, 00:01 4
WitcherAlex, нет, картинки вставляйте какие хотите, главное не меняйте названия классов.

на мои стили тоже внимание можете не обращать, замените на свои. Еще раз напоминаю, классы не трогайте.
0
0 / 0 / 0
Регистрация: 10.11.2018
Сообщений: 63
26.11.2018, 00:13  [ТС] 5
Qwerty_Wasd, Да, я разобрался, большое спасибо!
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
26.11.2018, 00:22 6
А вот это, если нужно без JS - https://codepen.io/qwerty_wasd/pen/EORWJx
Модули добавлять по аналогии.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="midget-module1">
  <label class="midget-open1" for="midget1"><img src="https://dummyimage.com/100x100/6985c2/000000.png&amp;text=КЛИК!" alt=""/></label>
  <input id="midget1" type="checkbox"/>
  <div class="back-label-text1">
    <label class="midget-close1" for="midget1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nam eos quas quasi doloremque dicta, maxime cumque iste ad, amet possimus iure sapiente ipsa nobis voluptas. Provident eius minus culpa.</label>
  </div>
</div>
<div class="midget-module2">
  <label class="midget-open2" for="midget2"><img src="https://dummyimage.com/100x100/6985c2/000000.png&amp;text=КЛИК!" alt=""/></label>
  <input id="midget2" type="checkbox"/>
  <div class="back-label-text2">
    <label class="midget-close2" for="midget2">Quae nam eos quas quasi doloremque dicta, maxime cumque iste ad, amet possimus iure sapiente ipsa nobis voluptas. Provident eius minus culpa.</label>
  </div>
</div>
<div class="midget-module3">
  <label class="midget-open3" for="midget3"><img src="https://dummyimage.com/100x100/6985c2/000000.png&amp;text=КЛИК!" alt=""/></label>
  <input id="midget3" type="checkbox"/>
  <div class="back-label-text3">
    <label class="midget-close3" for="midget3">Provident eius minus culpa.</label>
  </div>
</div>
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
.midget-module1 {
  position: relative;
  display: inline-block;
}
 
.midget-module2 {
  position: relative;
  display: inline-block;
}
 
.midget-module3 {
  position: relative;
  display: inline-block;
}
 
.midget-open1 {
  cursor: pointer;
}
 
.midget-open2 {
  cursor: pointer;
}
 
.midget-open3 {
  cursor: pointer;
}
 
.back-label-text1 {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.3);
}
 
.back-label-text2 {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.3);
}
 
.back-label-text3 {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.3);
}
 
label.midget-close1 {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50vw;
  background: #ffffff;
  border: 2px solid #000000;
  cursor: pointer;
}
 
label.midget-close2 {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50vw;
  background: #ffffff;
  border: 2px solid #000000;
  cursor: pointer;
}
 
label.midget-close3 {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50vw;
  background: #ffffff;
  border: 2px solid #000000;
  cursor: pointer;
}
 
#midget1 {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
#midget1:checked ~ .back-label-text1 {
  display: flex;
}
 
#midget2 {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
#midget2:checked ~ .back-label-text2 {
  display: flex;
}
 
#midget3 {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
#midget3:checked ~ .back-label-text3 {
  display: flex;
}
0
0 / 0 / 0
Регистрация: 10.11.2018
Сообщений: 63
26.11.2018, 01:16  [ТС] 7
Qwerty_Wasd, Емае, сколько кода, не нужно было) Но все равно спасибо!
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
26.11.2018, 01:19 8
WitcherAlex, Не за что Код кстати не только для Вас, после .. сюда придут другие в поисках знаний. Поэтому и темы здесь не удаляют.
0
0 / 0 / 0
Регистрация: 10.11.2018
Сообщений: 63
26.11.2018, 11:12  [ТС] 9
Qwerty_Wasd, У меня ещё один вопрос, когда я нажимаю на картинку, у меня, появляется блок, он не во всю ширину экрана. Вопрос в том, как мне затемнить оставшуюся часть экрана(не вкл. Блока появления)?
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
26.11.2018, 12:51 10
WitcherAlex, приложите код, демонстрирующий Вашу проблему.
И на будущее, обязательно прочитайте правила форума - https://www.cyberforum.ru/announcement.php?a=3.
Например пункт 5.16
Запрещено создавать темы с множеством вопросов во всех разделах, кроме разделов платных услуг. Один вопрос - одна тема.
0
26.11.2018, 12:51
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 26.11.2018, 12:51
Помогаю со студенческими работами здесь

Блок DIV как открыть документ?
&lt;div id=&quot;main&quot;&gt; Index.html????????? &lt;/div&gt; Как в блоке див вывести документ например...

Как в блоке div открыть страницу
Помогите как в div блоке открыть страницу , фреим устаревшее решения. Плеер написан на html /css...

Открыть страничку в блоке div(css)
Добрый день! Не знаю в эту ли тему пишу! Имеется html css страничка и нужно другую страничку...

Как открыть один документ html из другого по нажатию кнопки?
К примеру вводится логин и пароль. Если существует такая страница html, название которой совпадает...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Книги и учебные ресурсы по C#
InfoMaster 08.01.2025
Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .
Что такое NullReferenceEx­­­ception и как исправить?
InfoMaster 08.01.2025
NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .
Что такое Null Pointer Exception (NPE) и как это исправить?
InfoMaster 08.01.2025
Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .
Русский язык в консоли C++
InfoMaster 08.01.2025
При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .
Telegram бот на C#
InfoMaster 08.01.2025
Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .
Использование GraphQL в Go (Golang)
InfoMaster 08.01.2025
Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор?
Alexander-7 08.01.2025
Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .
Как работать с GraphQL на TypeScript
InfoMaster 08.01.2025
Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .
Счётчик на базе сумматоров + регистров и генератора сигналов согласования.
Hrethgir 07.01.2025
Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .
Как перейти с Options API на Composition API в Vue.js
BasicMan 06.01.2025
Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .
Архитектура современных процессоров
inter-admin 06.01.2025
Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .
История создания реляционной модели баз данных, правила Кодда
Programming 06.01.2025
Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru