При нажатии на первую ссылку, выводится "Отображаемый блок 1". При клике на вторую, выводится "Отображаемый блок 2"
Вопрос как показать текст если ничего ещё не нажато ?
<script>
function openbox(id) {
var all = document.querySelectorAll(".block-of-text");
for (var i = 0; i < all.length; i++) {
if (all[i].id == id) {
all[i].style.display = (all[i].style.display == 'none')? 'block' : 'none';
} else {
all[i].style.display = 'none';
}
}
}
</script>
<a href="#" onclick="openbox('box1'); return false">Записаться</a>
<a href="#" onclick="openbox('box2'); return false">Записаться</a>
<div class="block-of-text" id="box1" style="display: none;">Отображаемый блок 1</div>
<div class="block-of-text" id="box2" style="display: none;">Отображаемый блок 2</div>
1. thefreedom - 29 Января, 2020 - 10:05:02 - перейти к сообщению
2. LIME - 29 Января, 2020 - 10:31:08 - перейти к сообщению
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <script>
- var all = document.querySelectorAll(".block-of-text");
- var box3 = document.getElementById('box3');
- function openbox(id) {
- box3.style.display = 'none';
- for (var i = 0; i < all.length; i++) {
- if (all[i].id === id) {
- all[i].style.display = (all[i].style.display === 'none') ? 'block' : 'none';
- } else {
- all[i].style.display = 'none';
- }
- }
- }
- </script>
- <a href="#" onclick="openbox('box1'); return false">Записаться</a>
- <a href="#" onclick="openbox('box2'); return false">Записаться</a>
- <div class="block-of-text" id="box1" style="display: none;">Отображаемый блок 1</div>
- <div class="block-of-text" id="box2" style="display: none;">Отображаемый блок 2</div>
- <div id="box3">Ничего не нажато</div>