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

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

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

Так же есть еще один div
<div id="click">Здесь картинка</div>
Как сделать, чтобы при нажатии на click, показался main, и скрылся click
  • Вопрос задан
  • 14669 просмотров
Комментировать
Подписаться 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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать Extension для Google Chrome Webstore
22 дек. 2024, в 14:07
15000 руб./за проект
Нписать индикатор на языке Pine Script для TradingView
22 дек. 2024, в 13:01
50000 руб./за проект
Игра С# MVC console + wpf
22 дек. 2024, в 10:44
15000 руб./за проект
Ещё заказы