Переключение между div (ами)

@podenik · Регистрация: 05.06.2015

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

День добрый Господа! Есть вопрос
у меня кнопки списком :

HTML5
1
2
<li><a href="#" onclick="showHide('blok_id')">Налаштування</a></li>
        <li><a href="#" onclick="showHide('blok_1')">Повідомлення</a></li>

соответствующие им div :

HTML5
1
2
<div id="blok_id">  Хрень</div>
<div id="blok_1">  Корешок</div>

включение реализовал с помощью:

JavaScript
1
2
3
4
5
6
7
function showHide(element_id) {       
                if (document.getElementById(element_id)) {
                    var obj = document.getElementById(element_id);
                    if (obj.style.display != "block") {
                        obj.style.display = "block";  }
                    else obj.style.display = "none";}
                else alert("Элемент с id: " + element_id + " не найден!");}

когда включен первый div и я хочу включить второй , первый не уберается . Как исправить ошибку

Добавлено через 14 минут
имеется ввиду когда включен один div как включить второй выключая первый

@arcmag · 05.06.2015, 19:34

Ну вот...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>бла бла</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script>
function showHide(elemID){
    document.getElementById(elemID=="blok_id"?"blok_1":"blok_id").style.display = "none";
    document.getElementById(elemID=="blok_id"?"blok_id":"blok_1").style.display = "block";
}
</script>
<body>
<li><a href="#" onclick="showHide('blok_id')">Налаштування</a></li>
<li><a href="#" onclick="showHide('blok_1')">Повідомлення</a></li>
<div id="blok_id">  Хрень</div>
<div id="blok_1">  Корешок</div>
</body>
</html>

@podenik · 06.06.2015, 09:36 **[ТС]**

arcmag
Спасибо

Добавлено через 1 минуту
Но а как же тогда с 6- ти пунктами

@BANO · 06.06.2015, 14:31

podenik, вы имеете ввиду 6 штук этих дивов?

@podenik · 06.06.2015, 14:52 **[ТС]**

Да именно

Добавлено через 3 минуты
BANO, Вы можете разъяснить

@BANO · 06.06.2015, 15:00

podenik, вы можете всем дивам-вкладкам дать класс и по нему искать

JavaScript
1
2
3
4
5
tabs = [].slice.call(document.querySelectorAll(".TABS"))
function showHide(id){
tabs.forEach(function(e){e.style.display="none"})
document.getElementById(id).style.display="block"
}

Добавлено через 1 минуту
тоесть всем вкладкам вы дали класс TABS а функции также передаёте id вкладки которая должна быть показанна

@podenik · 06.06.2015, 15:09 **[ТС]**

я пишу в процедурном стиле , и не совсем разбераюсь с классами

@BANO · 06.06.2015, 15:23

podenik, я ща выпал в осадок

как так со классами не разбираетесь, а css

а что такое процедурный стиль?

Добавлено через 1 минуту
разберитесь, пожалуйста

@podenik · 06.06.2015, 15:31 **[ТС]**

сори понял типа tabs=1
tabs=2

Добавлено через 1 минуту
Я сначала подумал совсем о другом, сори

Добавлено через 3 минуты
Тоесть каждую кнопку засовывать в отдельный класс??

@BANO · 06.06.2015, 15:38

нет
вам каждой кнопке надо поставить id вкладки которую надо показать
а всем вкладкам надо поставить класс TABS
ну это будет примерно так

HTML5
1
2
3
<button onclick="showHide('tab1')">вкладка 1</button><button onclick="showHide('tab2')">вкладка 2</button>.....
 
<div class="TABS" id="tab1"></div><div class="TABS" id="tab2"</div>.............

@Fedor Vlasenko · 06.06.2015, 15:42

Может без js

http://jsfiddle.net/vlasenkofedor/qPC6a/
http://jsfiddle.net/vlasenkofedor/zQ6ae/

@BANO · 06.06.2015, 15:56

Poznakomlus, вот обломал, так обломал
я хотел всё делать как всегда через костыли, а ты раз и обломал со своим css )))
и действительно
можно сделать таким способом

Добавлено через 1 минуту
я нашёл оправдание своей дырявой памяти:
тема находится в разделе js, значит надо отвечать на js))

@podenik · 06.06.2015, 15:57 **[ТС]**

BANO,
Сенькью вери мач,
я только учусь в php ? но паралельно есть задачи такого типа
ВСЕ РАботает

@BANO · 06.06.2015, 15:59

podenik, you welcome

@Fedor Vlasenko · 06.06.2015, 15:59

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

как всегда через костыли

зачем же так

каждый должен написать свои вкладки и табы, вот пример еще моих двух работ
Табы и вкладки Jquery
Табы и вкладки на js

@podenik · 06.06.2015, 16:03 **[ТС]**

Poznakomlus вопрос совсем не втом. твое решение не втему

@BANO · 06.06.2015, 16:08

Не по теме:

Poznakomlus, спасибо за более короткое превращение nodelist в array
возьму на вооружение

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@podenik 0 / 0 / 0 Регистрация: 05.06.2015 Сообщений: 10
	06.06.2015, 09:36 [ТС]
	arcmag Спасибо Добавлено через 1 минуту Но а как же тогда с 6- ти пунктами 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	06.06.2015, 14:31
	podenik, вы имеете ввиду 6 штук этих дивов? 0

@podenik 0 / 0 / 0 Регистрация: 05.06.2015 Сообщений: 10
	06.06.2015, 14:52 [ТС]
	Да именно Добавлено через 3 минуты BANO, Вы можете разъяснить 0

@podenik 0 / 0 / 0 Регистрация: 05.06.2015 Сообщений: 10
	06.06.2015, 15:09 [ТС]
	я пишу в процедурном стиле , и не совсем разбераюсь с классами 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	06.06.2015, 15:23
	podenik, я ща выпал в осадок как так со классами не разбираетесь, а css а что такое процедурный стиль? Добавлено через 1 минуту разберитесь, пожалуйста 0

@podenik 0 / 0 / 0 Регистрация: 05.06.2015 Сообщений: 10
	06.06.2015, 15:31 [ТС]
	сори понял типа tabs=1 tabs=2 Добавлено через 1 минуту Я сначала подумал совсем о другом, сори Добавлено через 3 минуты Тоесть каждую кнопку засовывать в отдельный класс?? 0

@Fedor Vlasenko 936 / 693 / 236 Регистрация: 01.02.2015 Сообщений: 1,848
	06.06.2015, 15:42
	Может без js http://jsfiddle.net/vlasenkofedor/qPC6a/ http://jsfiddle.net/vlasenkofedor/zQ6ae/ 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	06.06.2015, 15:56
	Poznakomlus, вот обломал, так обломал я хотел всё делать как всегда через костыли, а ты раз и обломал со своим css ))) и действительно можно сделать таким способом Добавлено через 1 минуту я нашёл оправдание своей дырявой памяти: тема находится в разделе js, значит надо отвечать на js)) 1

@podenik 0 / 0 / 0 Регистрация: 05.06.2015 Сообщений: 10
	06.06.2015, 15:57 [ТС]
	BANO, Сенькью вери мач, я только учусь в php ? но паралельно есть задачи такого типа ВСЕ РАботает 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	06.06.2015, 15:59
	podenik, you welcome 1

@podenik 0 / 0 / 0 Регистрация: 05.06.2015 Сообщений: 10
	06.06.2015, 16:03 [ТС]
	Poznakomlus вопрос совсем не втом. твое решение не втему 0

@BANO
	06.06.2015, 16:08
	Не по теме: Poznakomlus, спасибо за более короткое превращение nodelist в array возьму на вооружение 0