Сделал меню без перезагрузки страницы, но когда пытаюсь в меню сделать подменю то перестает работать, не могу разобраться в чем проблема, пожалуйста помогите.
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>
Разобрался самостоятельно, у меня были одинаковые имена исполняемых функций поэтому сразу все срабатывало, вот рабочий вариант меню без перезагрузки страницы с подменю.
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>
Я использую vue-chartjs и мне нужно чтобы мой график при маунте приложения был не от начала до конца полотна, а немного не доходил до концаПока...
Нужно выполнить js из python и получить данные, которые выдаст js после выполненияВидел что есть PyV8, но он только для python2
Столкнулся с MutationObserver, понадобилось прокинуть кнопку, по нажатию на которую, раскрывалось подменю с ссылками
Всем приветСтоит такая задача: