Показать и скрыть слои

@Дмитрий Дмитрий · Регистрация: 17.09.2016

Студворк — интернет-сервис помощи студентам

Есть три слоя Layer1, Layer2, Layer3 нужно так при нажатии button1 слой Layer1 показывается, а слои Layer2, Layer3 скрыты; при нажатии button2 слой Layer2 показывается, а слои Layer1, Layer3 скрыты; при нажатии button3 слой Layer3 показывается, а слои Layer1, Layer2 скрыты; При загрузке страницы должен быть виден слой Layer1.

Пока работает так:

JavaScript
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
button1.addEventListener("click", layer1);//скрываем и показываем слой Layer1
button2.addEventListener("click", layer2);//скрываем и показываем слой Layer2
button3.addEventListener("click", layer3);//скрываем и показываем слой Layer3
 
//Функция скрывает и показывает слой Layer1-------------------------------------------
 
function layer1() {
with (document.getElementById('Layer1').style)
    {
       if (display == "none")
           display = "block";
       else
           display = "none";
    }
};
//Функция скрывает и показывает слой Layer2-------------------------------------------
 
function layer2() {
with (document.getElementById('Layer2').style)
    {
       if (display == "none")
           display = "block";
       else
           display = "none";
    }
};
//Функция скрывает и показывает слой Layer3-------------------------------------------
 
function layer3() {
with (document.getElementById('Layer3').style)
    {
       if (display == "none")
           display = "block";
       else
           display = "none";
    }
};

Добавлено через 17 часов 47 минут
Почему такой вариант не работает?

JavaScript
1
2
3
4
5
6
7
8
9
function layer3() {
layerStyl3 = document.getElementById('Layer3').style;
    if (layerStyl3.style.display == "none") {
            layerStyl3.style.display = "block";
        } else {
            layerStyl3.style.display = "none";
    }
    
};

Такой работает

JavaScript
1
2
3
4
5
6
7
8
9
function layer3() {
with (document.getElementById('Layer3').style)
    {
       if (display == "none")
           display = "block";
       else
           display = "none";
    }
};

@Balanaar · 28.10.2016, 11:02

JavaScript
1
2
3
4
5
6
7
8
9
function layer3() {
layerStyl3 = document.getElementById('Layer3');
    if (layerStyl3.style.display == "none") {
            layerStyl3.style.display = "block";
        } else {
            layerStyl3.style.display = "none";
    }
    
};

@efx · 28.10.2016, 11:04

Сообщение от Дмитрий Дмитрий

Почему такой вариант не работает?

Потому что надо так писать:

JavaScript
1
layerStyl3.display

а не:

JavaScript
1
layerStyl3.style.display

@Дмитрий Дмитрий · 28.10.2016, 11:08 **[ТС]**

Ясно, спасибо.
Ну а по основной проблеме не подскажите?

@Balanaar · 28.10.2016, 11:12

А где проблема то? Я вижу дано, вижу задачу, вижу реализацию. Проблему не вижу.

@Дмитрий Дмитрий · 28.10.2016, 11:13 **[ТС]**

Есть три слоя Layer1, Layer2, Layer3 нужно так при нажатии button1 слой Layer1 показывается, а слои Layer2, Layer3 скрыты; при нажатии button2 слой Layer2 показывается, а слои Layer1, Layer3 скрыты; при нажатии button3 слой Layer3 показывается, а слои Layer1, Layer2 скрыты; При загрузке страницы должен быть виден слой Layer1.

В коде выше, приходиться каждый элемент скрывать.

@Balanaar · 28.10.2016, 11:22

JavaScript
1
2
3
4
5
6
7
8
function showLayer(layerNumber) { // Показываем слой с номером layerNumber. Остальные скрываем.
  for (var i = 1; i <= 3; i++) {
    var layerToHide  = document.getElementById('Layer'+i);
    layerToHide.style.display = "none";
  }
  var layerToShow  = document.getElementById('Layer'+layerNumber);
  layerToShow.style.display = "block";
}

Добавлено через 2 минуты

Сообщение от Дмитрий Дмитрий

При загрузке страницы должен быть виден слой Layer1

CSS
1
2
3
#Layer2, #Layer3 {
  display: none;
}

@Дмитрий Дмитрий · 28.10.2016, 11:27 **[ТС]**

Так

JavaScript
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
button1.addEventListener("click", showLayer(1));
button2.addEventListener("click", showLayer(2));
button3.addEventListener("click",showLayer(3));
 
function showLayer(1) { // Показываем слой с номером layerNumber. Остальные скрываем.
  for (var i = 1; i <= 3; i++) {
    var layerToHide  = document.getElementById('Layer'+i);
    layerToHide.style.display = "none";
  }
  var layerToShow  = document.getElementById('Layer'+1);
  layerToShow.style.display = "block";
}
 
function showLayer(2) { // Показываем слой с номером layerNumber. Остальные скрываем.
  for (var i = 1; i <= 3; i++) {
    var layerToHide  = document.getElementById('Layer'+i);
    layerToHide.style.display = "none";
  }
  var layerToShow  = document.getElementById('Layer'+2);
  layerToShow.style.display = "block";
}
 
function showLayer(3) { // Показываем слой с номером layerNumber. Остальные скрываем.
  for (var i = 1; i <= 3; i++) {
    var layerToHide  = document.getElementById('Layer'+i);
    layerToHide.style.display = "none";
  }
  var layerToShow  = document.getElementById('Layer'+3);
  layerToShow.style.display = "block";
}

@mrtoxas · 28.10.2016, 11:28

Есть еще такой вариант

HTML5
1
2
3
4
5
6
<button id="btn1" data-trg="layer1">Button1</button>
<button id="btn2" data-trg="layer2">Button2</button>
<button id="btn3" data-trg="layer3">Button3</button>
<div id="layer1">layer1</div>
<div id="layer2">layer2</div>
<div id="layer3">layer3</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var btns = document.querySelectorAll('[id^="btn"]'),
  layers = document.querySelectorAll('[id^="layer"]');
[].forEach.call(btns, function(elem) {
  elem.addEventListener('click', showHide, false);
});
 
function showHide() {
  var btnTrg = this.getAttribute('data-trg');
  [].forEach.call(layers, function(elem) {
    elem.style.display = (elem.id == btnTrg) ? 'block' : 'none'
  })
}

@Balanaar · 28.10.2016, 11:30

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
button1.addEventListener("click", showLayer(1));
button2.addEventListener("click", showLayer(2));
button3.addEventListener("click",showLayer(3));
 
function showLayer(layerNumber) { // Показываем слой с номером layerNumber. Остальные скрываем.
  for (var i = 1; i <= 3; i++) {
    var layerToHide  = document.getElementById('Layer'+i);
    layerToHide.style.display = "none";
  }
  var layerToShow  = document.getElementById('Layer'+layerNumber);
  layerToShow.style.display = "block";
}

@Дмитрий Дмитрий · 28.10.2016, 11:36 **[ТС]**

Не работает(((

@Balanaar · 28.10.2016, 11:37

Покажите разметку

@Дмитрий Дмитрий · 28.10.2016, 11:56 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="Layer3">
<div id="Layer3_Container">
<div id="Layer2">
<div id="Layer2_Container">
<div id="Layer4">
<div id="Layer4_Container">
<input type="button" id="mobilButton1" name="" value="Вертикальные">
<input type="button" id="mobilButton2" name="" value="Горизонтальные">
<input type="button" id="mobilButton3" name="" value="Рулонные">
</div>
</div>
<div id="Layer1">
<div id="Layer1_Container">
</div>
</div>

Добавлено через 14 минут
data-trg= это что, с чем едят))

@Balanaar · 28.10.2016, 12:14

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
for (var i = 1; i <= 3; i++) {
  var button = document.getElementById('mobilButton'+i);
  button.number = i;
  button.addEventListener("click", showLayer);
}
 
function showLayer() { 
  for (var i = 1; i <= 3; i++) {
    var layerToHide  = document.getElementById('Layer'+i);
    layerToHide.style.display = "none";
  }
  var layerToShow  = document.getElementById('Layer'+this.number);
  layerToShow.style.display = "block";
}

Добавлено через 1 минуту

JavaScript
1
button1.addEventListener("click", showLayer(1));

Такая конструкция некорректна. Прошу прощения за введение в заблуждение.

@Дмитрий Дмитрий · 28.10.2016, 12:18 **[ТС]**

У меня к button все привязано т.е. они выполняют функции
button1 = byId('mobilButton1');
button2 = byId('mobilButton2');
button3 = byId('mobilButton3');

byId('mobilButton1').onclick = get1;
byId('mobilButton2').onclick = get2;
byId('mobilButton3').onclick = get3;

и скрывают слои, как привязать то ваш код теперь)))

@mrtoxas · 28.10.2016, 12:20

Сообщение от Дмитрий Дмитрий

data-trg= это что, с чем едят

Атрибуты data-*
В данном случае, в атрибуте указываем какой слой делает видимым конкретная кнопка.

@Дмитрий Дмитрий · 28.10.2016, 12:31 **[ТС]**

Выдает ошибку Uncaught TypeError: Cannot read property 'style' of null(…)

Сообщение от Balanaar

JavascriptВыделить код

for (var i = 1; i <= 3; i++) {
var button = document.getElementById('mobilButton'+i) ;
button.number = i;
button.addEventListener("click", showLayer);
}

function showLayer() {
for (var i = 1; i <= 3; i++) {
var layerToHide = document.getElementById('Layer'+i);
layerToHide.style.display = "none";
}
var layerToShow = document.getElementById('Layer'+this.num ber);
layerToShow.style.display = "block";
}

@Balanaar · 28.10.2016, 12:35

Сообщение от Дмитрий Дмитрий

var layerToHide *= document.getElementById('Layer'+i);

Что за звездочки там такие интересные появились у вас перед "="?

Добавлено через 2 минуты
Вот ваш пример в песочнице:
http://codepen.io/anon/pen/JRqpbg

@mrtoxas · 28.10.2016, 12:42

Вот еще вариант, разметку не трогал. Но можно еще упростить.

HTML5
1
2
3
4
5
6
<input type="button" id="mobilButton1" name="" value="Вертикальные">
<input type="button" id="mobilButton2" name="" value="Горизонтальные">
<input type="button" id="mobilButton3" name="" value="Рулонные">
<div id="layer1">layer1</div>
<div id="layer2">layer2</div>
<div id="layer3">layer3</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var button1 = document.getElementById('mobilButton1'),
  button2 = document.getElementById('mobilButton2'),
  button3 = document.getElementById('mobilButton3'),
  layers = document.querySelectorAll('[id^=layer]');
 
button1.addEventListener("click", hideShow.bind(0,'layer1'),false);
button2.addEventListener("click", hideShow.bind(0,'layer2'),false);
button3.addEventListener("click", hideShow.bind(0,'layer3'),false);
 
function hideShow(lay){
  [].forEach.call(layers,function(elem){
    elem.style.display = (elem.id == lay)?'block':'none';
  })
}

@Дмитрий Дмитрий · 28.10.2016, 13:16 **[ТС]**

Добавлено через 8 минут
Исправил, все работает, спасибо, вы как всегда на высоте проффесор mrtoxas )))

Новые блоги и статьи Все статьи Все блоги /
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .

Показать и скрыть слои

Решение

Решение

Решение

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	28.10.2016, 11:08 [ТС]
	Ясно, спасибо. Ну а по основной проблеме не подскажите? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	28.10.2016, 11:12
	А где проблема то? Я вижу дано, вижу задачу, вижу реализацию. Проблему не вижу. 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	28.10.2016, 11:13 [ТС]
	Есть три слоя Layer1, Layer2, Layer3 нужно так при нажатии button1 слой Layer1 показывается, а слои Layer2, Layer3 скрыты; при нажатии button2 слой Layer2 показывается, а слои Layer1, Layer3 скрыты; при нажатии button3 слой Layer3 показывается, а слои Layer1, Layer2 скрыты; При загрузке страницы должен быть виден слой Layer1. В коде выше, приходиться каждый элемент скрывать. 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	28.10.2016, 11:36 [ТС]
	Не работает((( 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	28.10.2016, 11:37
	Покажите разметку 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	28.10.2016, 12:18 [ТС]
	У меня к button все привязано т.е. они выполняют функции button1 = byId('mobilButton1'); button2 = byId('mobilButton2'); button3 = byId('mobilButton3'); byId('mobilButton1').onclick = get1; byId('mobilButton2').onclick = get2; byId('mobilButton3').onclick = get3; и скрывают слои, как привязать то ваш код теперь))) 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	28.10.2016, 13:16 [ТС]
	Добавлено через 8 минут Исправил, все работает, спасибо, вы как всегда на высоте проффесор mrtoxas ))) 0