30.10.2017, 15:10
|
|
Новичок на форуме
|
|
Регистрация: 30.10.2017
Сообщений: 4
|
|
|
Вызов таблицы по клику, и пропажа её по клику на любое другое место
 Такая задача, есть страница, на ней есть фотография и скрытая таблица. Нужно что бы по клику на фотографию таблица показалась, а по нажатию на любое другое место она пропадает.
<head>
<title> Команда "Дети". Проекты </title>
<link rel="stylesheet" type="text/css" href="Оформление 2.css" />
<script src="animation.js"></script>
</head>
<body>
<header>
</header>
<div class="cl1">
<img id="contactUs" href="#" src="https://pp.userapi.com/c840239/v840239202/12991/cyS08OKYqq0.jpg" alt=""width="250" height="200"></img></div>
<div class="proekt">
<ul>
<li>Главный проект:
<ol type="I">
<li>Умный дом</li>
</ol>
<li>Побочные проекты:
<ol type="1">
<li>Голосовое управление</li>
<li>Термоконтроль</li>
<li>Выключатель</li>
</ol>
</li></div>
<table border="1" id="tablica"><tr>
<td><big><a href="https://vk.com/id183235628">Дорош Александр</a></big></td>
<td><big><a href="https://vk.com/melvinblood">Пилькин Костя</a></big></td>
<td><big><a href="https://m.vk.com/grizzlybearsb">Тарасюк Михаил</a></big></td>
<td><big><a href="https://vk.com/id152163568">Пащук Артур</a></big></td>
</tr></div>
<tr>
<td><img src="https://pp.userapi.com/c840239/v840239202/12991/cyS08OKYqq0.jpg" alt=""width="300" height="200"></img></td>
<td><img src="https://pp.userapi.com/c636331/v636331966/38c6/w3yj4R2ivCs.jpg" alt=""width="300" height="200"></img></td>
<td><img src="https://pp.userapi.com/c841425/v841425468/16ae7/urh4JMgZLI4.jpg" alt=""width="300" height="200"></img></td>
<td><img src="https://pp.userapi.com/c836232/v836232805/5f978/suFp26brjhc.jpg" alt=""width="180" height="200"></img></td>
</tr>
<tr>
<td>
<ul>
<li><big><b>Навыки:</b></big>
<ul>
<li>Пайки, присуствует</li>
<li>Конструирования, присуствует</li>
<li>Работы в программах САПР, присуствует</li>
<li>Создание программ для ЧПУ станка, присуствует</li>
<li>Создания БПЛА, присуствуют</li>
<li>web - Дизайна, отсуствуют</li>
</li></ul>
<li><big><b>Достижения:</b></big><ul>
<li>Участник международных соревнований</li>
<li>Создание собственного проекта 3D-принтера</li></ul></ul>
</td>
<td>
<ul>
<li><big><b>Навыки:</b></big>
<ul>
<li>Пайки, присуствуют</li>
<li>Конструирования, отсуствуют</li>
<li>Работы в программах САПР, присуствуют</li>
<li>Создание программ для ЧПУ станка, отсуствуют</li>
<li>Создания БПЛА, отсуствуют</li>
<li>web - Дизайна, присуствуют</li>
<li>Езды на роликах присуствуют</li>
</li></ul>
<li><big><b>Достижения:</b></big><ul>
<li>Участник коллектива, который занимается фаер шоу</li>
<li>Участник республиканских и международного конкурса и конференции</li>
<li>Олимпиадник в обсласти физики 4 год</li>
<li>Нахождение на доске почёта колледжа</li>
</ul></ul>
</td>
<td>
<ul>
<li><big><b>Навыки:</b></big><ul>
<li>Пайки, присуствуют</li>
<li>Конструирования, присуствует</li>
<li>Работы в программах САПР, отсуствуют</li>
<li>Создание программ для ЧПУ станка, отсуствуют</li>
<li>Создания БПЛА, отсуствуют</li>
<li>web - Дизайна, отсуствуют</li>
<li>Езды на роликах присуствуют</li>
<li>Езды на скейте присуствуют</li>
</li></ul>
<li><big><b>Достижения:</b></big><ul>
<li>Занятие баскетболом</li>
<li>Занятия волейболом</li>
<li>Занятия футболом</li>
<li>Постоянный член кооманды группы в спортивных мероприятиях</li>
</td>
<td>
<ul>
<li><big><b>Навыки:</b></big><ul>
<li>Пайки, присуствуют</li>
<li>Конструирования, присуствует</li>
<li>Работы в программах САПР, присуствуют</li>
<li>Создание программ для ЧПУ станка, отсуствуют</li>
<li>Создания БПЛА, отсуствуют</li>
<li>web - Дизайна, отсуствуют</li>
<li>Езды на роликах присуствуют</li>
</li></ul>
<li><big><b>Достижения:</b></big><ul>
<li>Занятие фигурным катанием</li>
<li>Занятия ганболом</li>
</td>
</a>
</table>
<div id="backcallmsgdiv">
<a href="#">
<div id="close">X</div>
</a>
</div>
</body>
Последний раз редактировалось MelvinBlood, 30.10.2017 в 15:18.
Причина: Посчитал нужным скинуть код
|
|
30.10.2017, 15:39
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
Может так?
<head>
<title> Команда "Дети". Проекты </title>
<link rel="stylesheet" type="text/css" href="Оформление 2.css" />
<script src="animation.js"></script>
</head>
<body>
<header>
</header>
<div class="cl1">
<img id="contactUs" href="#" src="https://pp.userapi.com/c840239/v840239202/12991/cyS08OKYqq0.jpg" alt=""width="250" height="200"></img></div>
<div class="proekt">
<ul>
<li>Главный проект:
<ol type="I">
<li>Умный дом</li>
</ol>
<li>Побочные проекты:
<ol type="1">
<li>Голосовое управление</li>
<li>Термоконтроль</li>
<li>Выключатель</li>
</ol>
</li></div>
<table border="1" id="tablica"><tr>
<td><big><a href="https://vk.com/id183235628">Дорош Александр</a></big></td>
<td><big><a href="https://vk.com/melvinblood">Пилькин Костя</a></big></td>
<td><big><a href="https://m.vk.com/grizzlybearsb">Тарасюк Михаил</a></big></td>
<td><big><a href="https://vk.com/id152163568">Пащук Артур</a></big></td>
</tr></div>
<tr>
<td><img src="https://pp.userapi.com/c840239/v840239202/12991/cyS08OKYqq0.jpg" alt=""width="300" height="200"></img></td>
<td><img src="https://pp.userapi.com/c636331/v636331966/38c6/w3yj4R2ivCs.jpg" alt=""width="300" height="200"></img></td>
<td><img src="https://pp.userapi.com/c841425/v841425468/16ae7/urh4JMgZLI4.jpg" alt=""width="300" height="200"></img></td>
<td><img src="https://pp.userapi.com/c836232/v836232805/5f978/suFp26brjhc.jpg" alt=""width="180" height="200"></img></td>
</tr>
<tr>
<td>
<ul>
<li><big><b>Навыки:</b></big>
<ul>
<li>Пайки, присуствует</li>
<li>Конструирования, присуствует</li>
<li>Работы в программах САПР, присуствует</li>
<li>Создание программ для ЧПУ станка, присуствует</li>
<li>Создания БПЛА, присуствуют</li>
<li>web - Дизайна, отсуствуют</li>
</li></ul>
<li><big><b>Достижения:</b></big><ul>
<li>Участник международных соревнований</li>
<li>Создание собственного проекта 3D-принтера</li></ul></ul>
</td>
<td>
<ul>
<li><big><b>Навыки:</b></big>
<ul>
<li>Пайки, присуствуют</li>
<li>Конструирования, отсуствуют</li>
<li>Работы в программах САПР, присуствуют</li>
<li>Создание программ для ЧПУ станка, отсуствуют</li>
<li>Создания БПЛА, отсуствуют</li>
<li>web - Дизайна, присуствуют</li>
<li>Езды на роликах присуствуют</li>
</li></ul>
<li><big><b>Достижения:</b></big><ul>
<li>Участник коллектива, который занимается фаер шоу</li>
<li>Участник республиканских и международного конкурса и конференции</li>
<li>Олимпиадник в обсласти физики 4 год</li>
<li>Нахождение на доске почёта колледжа</li>
</ul></ul>
</td>
<td>
<ul>
<li><big><b>Навыки:</b></big><ul>
<li>Пайки, присуствуют</li>
<li>Конструирования, присуствует</li>
<li>Работы в программах САПР, отсуствуют</li>
<li>Создание программ для ЧПУ станка, отсуствуют</li>
<li>Создания БПЛА, отсуствуют</li>
<li>web - Дизайна, отсуствуют</li>
<li>Езды на роликах присуствуют</li>
<li>Езды на скейте присуствуют</li>
</li></ul>
<li><big><b>Достижения:</b></big><ul>
<li>Занятие баскетболом</li>
<li>Занятия волейболом</li>
<li>Занятия футболом</li>
<li>Постоянный член кооманды группы в спортивных мероприятиях</li>
</td>
<td>
<ul>
<li><big><b>Навыки:</b></big><ul>
<li>Пайки, присуствуют</li>
<li>Конструирования, присуствует</li>
<li>Работы в программах САПР, присуствуют</li>
<li>Создание программ для ЧПУ станка, отсуствуют</li>
<li>Создания БПЛА, отсуствуют</li>
<li>web - Дизайна, отсуствуют</li>
<li>Езды на роликах присуствуют</li>
</li></ul>
<li><big><b>Достижения:</b></big><ul>
<li>Занятие фигурным катанием</li>
<li>Занятия ганболом</li>
</td>
</a>
</table>
<div id="backcallmsgdiv">
<a href="#">
<div id="close">X</div>
</a>
</div>
<script>
var table=document.getElementById('tablica');
document.getElementById('contactUs').addEventListener('click',function(e){
e.stopPropagation();
table.style.display='block';
});
document.addEventListener('click',function(){
table.style.display='none';
});
</script>
</body>
var table=document.getElementById('tablica');
document.getElementById('contactUs').addEventListener('click',function(e){
e.stopPropagation();
table.style.display='block';
});
document.addEventListener('click',function(){
table.style.display='none';
});
Последний раз редактировалось Nexus, 30.10.2017 в 15:47.
|
|
30.10.2017, 15:45
|
|
Новичок на форуме
|
|
Регистрация: 30.10.2017
Сообщений: 4
|
|
|
К сожалению не работает
|
|
30.10.2017, 15:48
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
|
Сообщение от MelvinBlood
|
|
К сожалению не работает
|
А по-моему все чудесно работает. |
|
30.10.2017, 15:59
|
|
Новичок на форуме
|
|
Регистрация: 30.10.2017
Сообщений: 4
|
|
|
Эм, только что опрробовал, ни в какую. Таблица скрыта через стиль display:none
|
|
30.10.2017, 16:27
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,215
|
|
|
Сообщение от MelvinBlood
|
|
только что опрробовал, ни в какую
|
Ты бы хоть примеры свои показывал для подтверждения содеянного... |
|
30.10.2017, 19:33
|
|
Новичок на форуме
|
|
Регистрация: 30.10.2017
Сообщений: 4
|
|
|
Что конкретно требуется показать, а то я дуб дубом
|
|
|
|
