Нажатие на блок div и появление блока div. / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Нажатие на блок div и появление блока div.

6 сообщений из 6, страница 1 из 1

Нажатие на блок div и появление блока div.

#39222334

Askm

Гость

Вот у меня есть блок div, являющийся кнопкой. При нажатии на него появляется другой блок div с текстом (я его потом сделаю ссылкой, но речь не про это).У меня следующие проблемы:
I) При нажатии на блок-кнопку тот меняет свой цвет, и когда я нажимаю куда-нибудь, то он благополучно возвращает свой изначальный цвет, НО он НЕ возвращает свой цвет когда я нажимаю на него самого.
II) При нажатии на блок-кнопку, рядом появляется белый блок, и когда я кликаю на блок-кнопку - этот белый блок благополучно исчезает, НО когда я нажимаю куда-нибудь - он НЕ исчезает.
III) При нажатии на один блок-кнопку появляется белый блок, и когда я нажимаю на другой блок-кнопку - появляется другой белый блок, НО предыдущий белый блок ДОЛЖЕН исчезнуть, НО НЕ ИСЧЕЗАЕТ.

Вот мои коды:
HTML-файл:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="Stile.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Action.css" type="text/css" media="screen" />
<script src="MyJavaScripts.js"></script>
<title>InternetShop</title>
</head>
<body>
<a href="javascript:void(0);" onclick="Openbox('Diver1');"> <div class="Pick-link" tabindex="5" style="margin-top:30px;"><font size="5" color="#fffcde">Женская обувь</font></div> </a> <div id="Diver1" style="display:none;">Ботинки Кроссовки Мокасины Сапоги Туфли</div> 
   
<a href="javascript:void(0);" onclick="Openbox('Diver2');"><div class="Pick-link" tabindex="6" style="margin-top:20px;"><font size="5" color="#fffcde">Мужская обувь</font></div>   </a> <div id="Diver2" style="display:none;">Ботинки Кроссовки Сандалии</div> 
</body>
</html>

CSS-файл с названием "Stile":

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

.Pick-link{
	background-image: url('Pictures and images/PICKER1.png');
	background-size: 270px 30px;
	background-repeat: no-repeat;
	width:270px;	
	height:30px;
	margin-left:19px;
	letter-spacing:1.4px;
	font-weight: 790;
	text-align: center;
	cursor:pointer;
}

СSS-файл с названием "Action":

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

#Diver1{
	background-color: white;
	width:100px;	
	margin-top:-30px;
	margin-left:290px;
	position:absolute;
}
#Diver2{
	background-color: white;
	width:100px;	
	margin-top:-30px;
	margin-left:290px;
	position:absolute;
}

JS-файл с названием "MyJavaScripts":

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

function Openbox(id)
{
var el=document.getElementById(id);
if(el.style.display=="block")
{
el.style.display="none";
} else {
el.style.display="block";
}
}

Вот скриншоты:

...

Рейтинг:

0 / 0

22.04.2016, 12:48

| Ответить | Цитировать | Написать

Нажатие на блок div и появление блока div.

#39222800

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

Askm,

посмотрите ещё в сторону псевдокласса focus

Примерчик. Здесь кстати, выполняется ваш п.3

Код: html

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.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
ul {
  font:13px arial;
  position:absolute;
  width:60px; height:20px;
  list-style:none; margin:0; padding:0;
}
li ul {
  position:absolute;
  display:none;
  margin:-18px 0 0 68px;
  border-top:dashed 1px #634F36;
}
li {padding:2px; outline:none;}
li:focus ul {display:block;}
li div {
  width:100%; padding:0 4px;
  background:#EAF1DD;
  border:1px solid #008200;
}
li ul li {background:#fffff5; border:dashed 1px #634F36; border-top:0;}
</style>
</head>
<body>
<ul>
  <li tabindex="-1"><div>Овощи</div>
    <ul>
      <li>Морковь</li> 
      <li>Капуста</li> 
      <li>Репа</li> 
      <li>Лук</li> 
    </ul> 
  </li> 
  <li tabindex="-1"><div>Мебель</div>
    <ul> 
      <li>Стол</li> 
      <li>Шкаф</li> 
      <li>Комод</li> 
    </ul> 
  </li>
</ul>
</body>
</html>

...

Рейтинг:

0 / 0

22.04.2016, 18:40

| Ответить | Цитировать | Написать

Нажатие на блок div и появление блока div.

#39222824

Askm

Гость

Вот в css-файле " Action " у меня находится:

Код: css

1.
2.
3.

.Pick-link:focus{
	background-image: url('Pictures and images/PICKER1-PRESS.png');
}

Может что-то еще добавить. Кнопка у меня - это div, и эффект нажатия - это замена одного фона на другой (PICKER1.png на PICKER1-PRESS.png)

...

Рейтинг:

0 / 0

22.04.2016, 19:14

| Ответить | Цитировать | Написать

Нажатие на блок div и появление блока div.

#39222827

Askm

Гость

...

Рейтинг:

0 / 0

22.04.2016, 19:17

| Ответить | Цитировать | Написать

Нажатие на блок div и появление блока div.

#39222985

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

Askm,

всё верно. В обычном состоянии - первая картинка, а при щелчке по диву он приобретает фокус, и картинка меняется.
А tabindex у .Pick-link есть? Без tabindex не будет работать focus ...

Ещё вариант. Больше не знаю, чем помочь...

Код: html

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.

<!DOCTYPE html>
<html>
<head>
<title>tmp</title>
<meta charset="utf-8">
<style>
body {background-color:#f1f1f1;}
div {font:13px arial; position:relative;}
.Pick-link {
  width:55px; height:17px; padding:2px;
  background:#6598C7; color:#e3e3e3; cursor:pointer;
  border:1px solid #ccc; margin-top:5px;
}
.Pick-link:focus {background-color:#0048BA; color:#fff; outline:none;}
.info {
  position:absolute; background:#fff;
  width:100px; display:none;
}
</style>
</head>
<body>
<div class="Pick-link" onfocus="showInfo(this)" onblur="hideInfo(this)" tabindex="-1">Овощи</div>
<div class="info">Морковь<br>Репа<br>Капуста<br>Лук</div>

<div class="Pick-link" onfocus="showInfo(this)" onblur="hideInfo(this)" tabindex="-1">Мебель</div>
<div class="info">Стол<br>Шкаф<br>Комод</div>

<script>
function getElemCoords(elem) { // Координаты элемента относительно всего документа (учитывается прокрутка)
  var box = elem.getBoundingClientRect();
  return {x: box.left + pageXOffset, y: box.top + pageYOffset};
}

function showInfo(el) {
  var m = getElemCoords(el), st = el.nextElementSibling.style;
  st.top = m.y + 'px';
  st.left = m.x + el.offsetWidth +3+ 'px';
  st.display = 'block';
}

function hideInfo(el) {el.nextElementSibling.style.display = 'none';}
</script>
</body>
</html>

...

Рейтинг:

0 / 0

23.04.2016, 08:33

| Ответить | Цитировать | Написать

Нажатие на блок div и появление блока div.

#39223036

Askm

Гость

Я в общем пересмотрел свою "концепцию", и просто тупо сделал чтобы список появлялся при указании курсора на кнопку. Можно считать что вопросов больше нет. Вот код и скриншоты, если кому понадобится:
<<У меня там все достаточно "масштабно", поэтому здесь только все завязанное с кнопками:
HTML-файл:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="Stile.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Action.css" type="text/css" media="screen" />
<script src="MyJavaScripts.js"></script>
<title>BUTTONS</title>
</head>
<body>

<a href="#" onmouseover="Openbox1('Diver3')" onmouseout="Openbox2('Diver3')"><div class="Pick-link" tabindex="7" style="margin-top:20px;"><font>Детская обувь</font></div></a>       <div id="Diver3" onmouseover="Openbox1('Diver3')" onmouseout="Openbox2('Diver3')"><a href="#" onmouseover="Openbox1('Diver3-1')" onmouseout="Openbox2('Diver3-1')"><div style="width:100%; height:50%;">Для девочек ></div></a><a href="#" onmouseover="Openbox1('Diver3-2')" onmouseout="Openbox2('Diver3-2')"><div style="width:100%; height:50%;">Для мальчиков ></div></a></div>      <div id="Diver3-1" onmouseover="Openbox1('Diver3-1')" onmouseout="Openbox2('Diver3-1')"><p><a href="#"><div onmouseover="Openbox1('Diver3')" onmouseout="Openbox2('Diver3')" style="width:100%;height:100%;">Ботинки Пинетки Сапоги Туфли Чешки</div></a></p></div>
<a href="#" onmouseover="Openbox1('Diver4')" onmouseout="Openbox2('Diver4')"><div class="Pick-link" tabindex="8" style="margin-top:20px;"><font>Аксессуары</font></div></a>          <div id="Diver4" onmouseover="Openbox1('Diver4')" onmouseout="Openbox2('Diver4')"><p>Ложки Носки<p><p>Освежители<p><p>Полки<p><p>Стельки<p><p>Сушилки<p><p>Чехлы<p><p>Шнурки<p></div>                                  					                            				                                                                                                   <div id="Diver3-2" onmouseover="Openbox1('Diver3-2')" onmouseout="Openbox2('Diver3-2')"><p><a href="#"><div onmouseover="Openbox1('Diver3')" onmouseout="Openbox2('Diver3')" style="width:100%;height:100%;">Ботинки Сандалии Чешки</div></a></p></div>
</body></html>

Файл css - Stile.css:

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

a{
	text-decoration:none;
}
body {
  background: url('Pictures and images/Fon.jpg');
  background-size: cover;
}
font{
	font-size: 22px; 
	color:#fffcde;}

.Pick-link{
	background-image: url('Pictures and images/PICKER1.png');
	background-size: 270px 30px;
	background-repeat: no-repeat;
	width:270px;	
	height:30px;
	margin-left:19px;
	letter-spacing:1.4px;
	font-weight: 790;
	text-align: center;
	cursor:pointer;
}

CSS-файл - Action.css:

Код: css

1.
2.
3.

.Pick-link:hover{
	background-image: url('Pictures and images/PICKER1-PRESS.png');
}

JS-файл:

Код: javascript

1.
2.
3.
4.
5.
6.

function Openbox1(id) {
    document.getElementById(id).style.display = "block";
  }
  function Openbox2(id) {
    document.getElementById(id).style.display = "none";
  }

...

Рейтинг:

0 / 0

23.04.2016, 13:09

| Ответить | Цитировать | Написать

6 сообщений из 6, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Нажатие на блок div и появление блока div.

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&fpage=55&tid=1445292]:	0ms
get settings:	9ms
get forum list:	12ms
check forum access:	4ms
check topic access:	4ms
track hit:	54ms
get topic data:	13ms
get forum data:	3ms
get page messages:	47ms
get tp. blocked users:	2ms
others:	11ms

total:	159ms