Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.12.2017, 12:27
Интересующийся
Отправить личное сообщение для vospa Посмотреть профиль Найти все сообщения от vospa
 
Регистрация: 09.12.2017
Сообщений: 16

Переключение видимости div
Доброго времени суток, уважаемая аудитория!
Увы, в скриптах я полный ламер, поэтому прошу помощи.
Есть две кнопки и три дива:

<a  class="button28" id="toggler2" href="#">Инфо</a><a  class="button28" id="toggler" href="#">Лего</a>

<div id="front">куча там всего</div>
<div id="desinger" style="display: none;">еще куча всего</div>
<div id="info" style="display: none;">ну и еще куча</div>


Как можно видеть, два дива скрыты. Нужно, чтобы по нажатию на одну кнопку открывался один из скрытых дивов, а тот, который был открыт, скрывался. И менялось название кнопки. А при повторном нажатии на кнопку, возвращалось все в исходное состояние. Со второй кнопкой все точно так же. Только другой див должен открываться.

В случае одной кнопки и двух дивов прекрасно работает такой код

window.onload = function() {
    document.getElementById('toggler').onclick = function() {
        openbox('front', this);
        openbox('desinger', this);
        return false;
    };
};
function openbox(id, toggler) {
    var div = document.getElementById(id);
    if (div.style.display == 'none') {
        div.style.display = 'block';
        toggler.innerHTML = 'Панель';
    } else {
        div.style.display = 'none';
        toggler.innerHTML = 'Лего';
    }
};


Но вот повторить все это для второй кнопки не получается. Если я записываю такой вот код

window.onload = function() {
    document.getElementById('toggler2').onclick = function() {
        openbox('front', this);
        openbox('info', this);
        return false;
    };
};
function openbox(id, toggler2) {
    var div = document.getElementById(id);
    if (div.style.display == 'none') {
        div.style.display = 'block';
        toggler2.innerHTML = 'Панель';
    } else {
        div.style.display = 'none';
        toggler2.innerHTML = 'Инфо';
    }
};

window.onload = function() {
    document.getElementById('toggler').onclick = function() {
        openbox('front', this);
        openbox('desinger', this);
        return false;
    };
};
function openbox(id, toggler) {
    var div = document.getElementById(id);
    if (div.style.display == 'none') {
        div.style.display = 'block';
        toggler.innerHTML = 'Панель';
    } else {
        div.style.display = 'none';
        toggler.innerHTML = 'Лего';
    }
};


то работает только кнопка "Лего". Если меняю местами, то кнопка "Инфо".

Как заставить обе кнопки работать?
Ответить с цитированием
  #2 (permalink)  
Старый 09.12.2017, 13:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

vospa,
форум - поиск - открывашка
Ответить с цитированием
  #3 (permalink)  
Старый 09.12.2017, 14:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

vospa,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide{
      display: none;
  }
 </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var btn = document.querySelectorAll("[data-id]"),
        block = document.querySelectorAll(".toggle");
    [].forEach.call(btn, function(item, k) {
        item.dataset.text = item.textContent;
        var id = item.dataset.id;
        item.addEventListener("click", function(event) {
            event.preventDefault();
            [].forEach.call(block, function(el, i) {
                if (el.id == id) {
                  el.classList.toggle("hide");
                  el.classList.contains("hide") && block[0].classList.remove("hide")
                }
                else el.classList.add("hide");
            });
            [].forEach.call(btn, function(item, i) {
                var id = item.dataset.id;
                var el = document.getElementById(id)
                item.textContent = el.classList.contains("hide") ?  item.dataset.text : "Панель" ;
            })

        })
    })
});
  </script>
</head>

<body>
<a  class="button28" id="toggler2" href="#" data-id="info">Инфо</a><a  class="button28" id="toggler" href="#" data-id="desinger" >Лего</a>

<div id="front" class="toggle">front куча там всего</div>
<div id="desinger" class="toggle hide">Лего еще куча всего</div>
<div id="info" class="toggle hide">info ну и еще куча</div>

</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 09.12.2017, 14:59
Интересующийся
Отправить личное сообщение для vospa Посмотреть профиль Найти все сообщения от vospa
 
Регистрация: 09.12.2017
Сообщений: 16

рони,
Вооо!!! Большое человеческое спасибо! А то полдня угробил почти вслепую тыкаясь.
Открывашка, это не то, что мне нужно было. А вот это, то, что надо. Еще раз, спасибо :-)
Ответить с цитированием
  #5 (permalink)  
Старый 09.12.2017, 15:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от vospa
Открывашка, это не то, что мне нужно было
это и есть обычная открывашка на js ... от остальных 300 вариантов на форуме, она ничем не отличается, алогритм тот же(строки 22,23,24 и 27), разные только селекторы или источники данных.

Последний раз редактировалось рони, 09.12.2017 в 15:07.
Ответить с цитированием
  #6 (permalink)  
Старый 09.12.2017, 15:11
Интересующийся
Отправить личное сообщение для vospa Посмотреть профиль Найти все сообщения от vospa
 
Регистрация: 09.12.2017
Сообщений: 16

Сообщение от рони
это и есть обычная открывашка на js ... от остальных 300 вариантов на форуме, она ничем не отличается...
Это для Вас она ничем не отличается. А для человека, который практически ничего не может на js, еще как отличается
Еще раз, спасибо. Вставил в проект, панель для ФШ работает на ура!

Последний раз редактировалось vospa, 09.12.2017 в 15:24.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переключение DIV pokk Общие вопросы Javascript 2 29.11.2017 10:51
Переключение div блоков LLIypuk jQuery 2 17.05.2017 13:04
Переключение видимости ul ul ufaclub jQuery 2 26.04.2015 20:50
Несколько div блоков. Переключение по нажатии на соответствующую ссылку. Help$ Элементы интерфейса 4 25.09.2010 00:01
Переключение видимости блока sasyk Events/DOM/Window 4 26.01.2009 21:22