Вложенное подменю без перезагрузки страницы

138

22 мая 2022, 08:40

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

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>

Answer 1

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

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>