Есть 37 div'ов: <div id="ranging_1" class="ranging_1">
... еще много дочерних элементов разного типа ...
</div>
<div id="ranging_2" class="ranging_2">
... еще много дочерних элементов разного типа ...
</div>
<div id="ranging_3" class="ranging_3">
... еще много дочерних элементов разного типа ...
</div>
и так далее с шагом +1 по индексам id до 37-ого включительно
Есть 37 элементов меню:<a class="selector" href="#" onclick="openRanging_1()">Клац</a>
<a class="selector" href="#" onclick="openRanging_2()">Клац</a>
<a class="selector" href="#" onclick="openRanging_3()">Клац</a>
Все 37 div'ов предварительно скрыты средствами css, конкретнее scss препроцессором циклом @for:
@for $i from 1 through 37 {
.ranging_#{$i} {
display: none;
}
}
ЗАДАЧА: По клику на конкретный элемент меню - присваивать соответствующему div - display: block, тем самым показав его и всё его содержимое, и одновременно с этим закрывать раннее открытый из возможных 36 штук div.
мой JS:
Перепробовал много вариантов, не могу достичь результата, даже не вижу смысла перечислять что именно я пробовал, скажу только то, что все 37 div'ов я получил через:
var ranging_1 = document.getElementById('ranging_1');
var ranging_1 = document.getElementById('ranging_2');
var ranging_1 = document.getElementById('ranging_3');
Далее сформировал массив из этих переменных:var arrayRanging = [ranging_1, ranging_2, ranging_3, ranging_4, ranging_5, ranging_6, ranging_7, ranging_8, ranging_9, ranging_10, ranging_11, ranging_12, ranging_13, ranging_14, ranging_15, ranging_16, ranging_17, ranging_18, ranging_19, ranging_20, ranging_21, ranging_22, ranging_23, ranging_24, ranging_25, ranging_26, ranging_27, ranging_28, ranging_29, ranging_30, ranging_31, ranging_32, ranging_33, ranging_34, ranging_35, ranging_36, ranging_37];
И теперь я в тупике...function openRanging_1() {
arrayRanging[0].style.display = 'block';
for (var i = 0; i <= arrayRanging.length; i++) {
arrayRanging[i].style.display = 'none';
}
}
function openRanging_2() {
arrayRanging[1].style.display = 'block';
for (var i = 0; i <= arrayRanging.length; i++) {
arrayRanging[i].style.display = 'none';
}
}
function openRanging_3() {
arrayRanging[2].style.display = 'block';
for (var i = 0; i <= arrayRanging.length; i++) {
arrayRanging[i].style.display = 'none';
}
}