Задать вопрос
@sanya164
javascript

Как сделать, чтобы при нажатии появлялся объект?

У меня есть данные, заключенные в div
<div id="main">Данные</div>
Сами данные изначально скрыты кодом
#main {
    display: none;
   }

Так же есть еще один div
<div id="click">Здесь картинка</div>
Как сделать, чтобы при нажатии на click, показался main, и скрылся click
  • Вопрос задан
  • 14141 просмотр
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 4
nalomenko
@nalomenko
Руководитель отдела разработок в студии «Lava» 
$('#click').click(function(){ $('#main').show(); $('#click').hide(); });
Ответ написан
Комментировать
Комментировать
Taraflex
@Taraflex
Ищу работу. Контакты в профиле. 
var clickElem = document.getElementById('click');
clickElem.addEventListener('click',function(e){
    document.getElementById('main').style.display = 'block';
    clickElem.style.display = 'none';
})
Ответ написан
Комментировать
Комментировать
copyloc
@copyloc
Человек то я не глупый, просто притворяюсь
Есть 1001 способ. Для разнообразия подкину такой:

#main {
	display: none;
}
#click:hover {
	cursor: pointer;
}


function FuncImages() {
	document.getElementById("main").style.display = "block";
	document.getElementById("click").style.display = "none";
}


<div id = "main">Данные</div>
<div id = "click" onclick = "FuncImages()">Здесь картинка</div>
Ответ написан
1 комментарий
1 комментарий
reskwer
@reskwer
front-end developer
Мне стыдно за моих коллег, которые знают как решить такую задачу на JS но не знают как на CSS.
Решение на чистом CSS codepen.io/reskwer/pen/pvRbzB
Ну и исходники index.html
<!DOCTYPE html>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="reskwer">
	<title>Что-то на CodePen</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="main">
		<p>Какието данные</p>
		<p>Какието данные</p>
		<p>Какието данные</p>
		<p>Какието данные</p>
	</div>
	<a href="#main" id="click">
		<img src="http://placehold.it/100x50" alt="img">
	</a>
	<a href="#" id="back">Вернуть все</a>
</body>
</html>

style.css
#main{
	width: 400px;
	height: 200px;
	background: #eee;
	border: 1px solid black;
	text-align: center;
	margin: 10px 0px;
}
#main p{
	display: none;
}
#main:target p{
	display: block;
}
#main:target + #click{
	display: none;
}
#main:target ~ #back{
	display: block;
}
#back{
	display: none;
	margin-left: 311px;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать и интегрировать модуль на WordPress
26 апр. 2024, в 19:53
5000 руб./за проект
Разработать Telegram mini app
15 апр. 2024, в 22:14
30000 руб./за проект
Сделать тг бота для сбора 4 данных в эксель + проверка на подписку
26 апр. 2024, в 19:17
1000 руб./за проект
Ещё заказы