JavaScript+CSS. Включить\Выключить видимость div блока
Для динамического управления отображением div блока, нужно написать функцию на JavaScript и 2-а блока в теле страницы.
Первый блок назовем blockID - в нем будет содержание нашего блока
blockIDLink - в нем будет размещена ссылка которая будет манятся в зависимости от статуса блока.
Для скрытия блока и его отображения буем использовать параметр display из таблицы стилей. То есть если показать блок в CSS это выглядит так display: block; , если делать вызов через JS - document.getElementById('blockID').style.display = 'block'; . Соответственно если мы хотим скрыть блок используем display: none; а если через JS то document.getElementById('blockID').style.display = 'none';
Теперь смотрим, что у нас получается:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>Тестовая страница</title>
</head>
<script>
function DisBlock(type) {
if(type == 1){
document.getElementById('blockID').style.display = 'block';
document.getElementById('blockIDLink').innerHTML = '<a href="#" onclick="DisBlock(0); return false;">Выключить</a>';
}else {
document.getElementById('blockID').style.display = 'none';
document.getElementById('blockIDLink').innerHTML = '<a href="#" onclick="DisBlock(1); return false;">Включить</a>';
}
}
</script>
<body>
<div id="blockID">
Это содержание нашего блока
</div>
<div id="blockIDLink">
<a href="#" onclick="DisBlock(0); return false;">Выключить</a>
</div>
</body>
</html>
Комментарии:
Нету комментариев для вывода...