1

Сделал меню без перезагрузки страницы, но когда пытаюсь в меню сделать подменю то перестает работать, не могу разобраться в чем проблема, пожалуйста помогите.

var current = 'page1';
function show(id) {
  document.getElementById(current).style.display = 'none';
  document.getElementById(id).style.display = 'block';
  current = id;
}

var current = 'pace1';
function show(id) {
  document.getElementById(current).style.display = 'none';
  document.getElementById(id).style.display = 'block';
  current = id;
}

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btne");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("activee");
    current[0].className = current[0].className.replace(" activee", "");
    this.className += " activee";
  });
}

var header = document.getElementById("myDIC");
var btns = header.getElementsByClassName("btnec");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("activeec");
    current[0].className = current[0].className.replace(" activeec", "");
    this.className += " activeec";
  });
}
#page2, #page3 {
  display: none;
}

.btne {
  border: none;
  outline: none;
  padding: 10px 16px;
  cursor: pointer;
  color:#000000;
  font-size: 1.4em;
}

.activee, .btne:hover {
  text-decoration: underline #007bff;
  color:#000000;
}

#pace2, #pace3 {
  display: none;
}

.btnec {
  border: none;
  outline: none;
  padding: 10px 16px;
  cursor: pointer;
  color:#000000;
  font-size: 1.4em;
}

.activeec, .btnec:hover {
  text-decoration: underline #007bff;
  color:#000000;
}
<div id="myDIV">
  <a class="btne activee" href="#" onclick="show('page1'); return false;">Page 1</a> 
  <a class="btne" href="#" onclick="show('page2'); return false;">Page 2</a> 
  <a class="btne" href="#" onclick="show('page3'); return false;">Page 3</a> 
</div>

<div id="page1"> 

  <div id="myDIC">
    <a class="btnec activeec" href="#" onclick="show('pace1'); return false;">Pace 1</a> 
    <a class="btnec" href="#" onclick="show('pace2'); return false;">Pace 2</a> 
    <a class="btnec" href="#" onclick="show('pace3'); return false;">Pace 3</a> 
  </div>

  <div id="pace1">PACE1</div>
  <div id="pace2">PACE2 </div>
  <div id="pace3">PACE3</div>

</div>

<div id="page2">page2 page2 page2 page2 page2 page2 </div>
<div id="page3">page3 page3 page3 page3 page3 page3 </div>

5
  • Я виду у вас под блоком с PACE тег div закрывается, а перед не открывается
    – Max Grt
    17 ноя 2020 в 22:20
  • Что значит перестает работать?
    – Lukas
    17 ноя 2020 в 22:40
  • @MaxGrt это закрытие для div#page1
    – InDevX
    17 ноя 2020 в 23:09
  • ТС, объясните на словах что не работает или работает не так, как нужно.
    – InDevX
    17 ноя 2020 в 23:10
  • При нажатии на Page 1 должен открываться div c меню Pace 1 Pace 2 Pace 3 в которых имеется свое наполнение, При нажатии на Page 2 и Page 3 соответствующие div. Выше в коде первоначально все срабатывает но после клика по всем пунктам Page перестают работать пункты Pace, то есть вывод соответствующих им блоков. 18 ноя 2020 в 4:51

1 ответ 1

0

Разобрался самостоятельно, у меня были одинаковые имена исполняемых функций поэтому сразу все срабатывало, вот рабочий вариант меню без перезагрузки страницы с подменю.

var current = 'page1';
function show(id) {
  document.getElementById(current).style.display = 'none';
  document.getElementById(id).style.display = 'block';
  current = id;
}

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btne");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("activee");
    current[0].className = current[0].className.replace(" activee", "");
    this.className += " activee";
  });
}




var current2 = 'pace1';
function show2(id) {
  document.getElementById(current2).style.display = 'none';
  document.getElementById(id).style.display = 'block';
  current2 = id;
}



var header = document.getElementById("myDIC");
var btns2 = header.getElementsByClassName("btnec");
for (var i = 0; i < btns2.length; i++) {
  btns2[i].addEventListener("click", function() {
    var current2 = document.getElementsByClassName("activeec");
    current2[0].className = current2[0].className.replace(" activeec", "");
    this.className += " activeec";
  });
}
#page2, #page3 {
  display: none;
}

.btne {
  border: none;
  outline: none;
  padding: 10px 16px;
  cursor: pointer;
  color:#000000;
  font-size: 1.4em;
}

.activee, .btne:hover {
  text-decoration: underline #007bff;
  color:#000000;
}

#pace2, #pace3 {
  display: none;
}

.btnec {
  border: none;
  outline: none;
  padding: 10px 16px;
  cursor: pointer;
  color:#000000;
  font-size: 1.4em;
}

.activeec, .btnec:hover {
  text-decoration: underline #007bff;
  color:#000000;
}
<div id="myDIV">
  <a class="btne activee" href="#" onclick="show('page1'); return false;">Page 1</a> 
  <a class="btne" href="#" onclick="show('page2'); return false;">Page 2</a> 
  <a class="btne" href="#" onclick="show('page3'); return false;">Page 3</a> 
</div>

<div id="page1"> 

  <div id="myDIC">
    <a class="btnec activeec" href="#" onclick="show2('pace1'); return false;">Pace 1</a> 
    <a class="btnec" href="#" onclick="show2('pace2'); return false;">Pace 2</a> 
    <a class="btnec" href="#" onclick="show2('pace3'); return false;">Pace 3</a> 
  </div>

  <div id="pace1">PACE1</div>
  <div id="pace2">PACE2 </div>
  <div id="pace3">PACE3</div>

</div>

<div id="page2">page2 page2 page2 page2 page2 page2 </div>
<div id="page3">page3 page3 page3 page3 page3 page3 </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.