Вызов таблицы по клику, и пропажа её по клику на любое другое место
:help: :help: :help: Такая задача, есть страница, на ней есть фотография и скрытая таблица. Нужно что бы по клику на фотографию таблица показалась, а по нажатию на любое другое место она пропадает.
<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> |
Может так?
<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'; }); |
К сожалению не работает
|
Цитата:
|
Эм, только что опрробовал, ни в какую. Таблица скрыта через стиль display:none
|
Цитата:
|
Что конкретно требуется показать, а то я дуб дубом
|
Часовой пояс GMT +3, время: 18:47. |