Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Ссылки в блок
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Ссылки в блок

Страниц (1): [1]
 

1. thefreedom - 29 Января, 2020 - 10:05:02 - перейти к сообщению
При нажатии на первую ссылку, выводится "Отображаемый блок 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>
2. LIME - 29 Января, 2020 - 10:31:08 - перейти к сообщению
CODE (html):
скопировать код в буфер обмена
  1. <script>
  2.     var all = document.querySelectorAll(".block-of-text");
  3.     var box3 = document.getElementById('box3');
  4.    
  5.     function openbox(id) {
  6.         box3.style.display = 'none';
  7.         for (var i = 0; i < all.length; i++) {
  8.            if (all[i].id === id) {
  9.                all[i].style.display = (all[i].style.display === 'none') ? 'block' : 'none';
  10.            } else {
  11.                all[i].style.display = 'none';
  12.            }
  13.        }
  14.    }
  15. </script>
  16.  
  17. <a href="#" onclick="openbox('box1'); return false">Записаться</a>
  18. <a href="#" onclick="openbox('box2'); return false">Записаться</a>
  19.  
  20. <div class="block-of-text" id="box1" style="display: none;">Отображаемый блок 1</div>
  21. <div class="block-of-text" id="box2" style="display: none;">Отображаемый блок 2</div>
  22. <div id="box3">Ничего не нажато</div>
3. thefreedom - 29 Января, 2020 - 10:34:03 - перейти к сообщению
Пока писал и сам понял что всё просто )))
4. LIME - 29 Января, 2020 - 10:38:54 - перейти к сообщению
Вообще тут лучше бы навесить на класс отдельный обработчик и удалять его при первом клике в нем же. Чтоб не выполнять лишнее действие каждый раз. Но это уже чересчур перфекционизмом попахивает. Нормально и так.

 

Powered by ExBB FM 1.0 RC1