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

@Дмитрий Дмитрий · Регистрация: 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 )))

Новые блоги и статьи Все статьи Все блоги /
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

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

Решение

Решение

Решение

@Дмитрий Дмитрий 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