Блог

Главная - Вопросы по программированию - Пусть ссылка на адрес откроет раздел «Скрыть» в JavaScript

Пусть ссылка на адрес откроет раздел «Скрыть» в JavaScript

#javascript #html #display

Вопрос:

Я новичок в JS, поэтому мой вопрос возможен, если у меня много разделов, и я могу открывать их при нажатии на кнопку (они display: none; по умолчанию и открываются при нажатии на кнопку меню на той же странице). Мне нужно создать ссылки, которые, если кто-то введет в адресное поле, откроются эти разделы… но как это сделать, если это display: none; по адресу? Может быть, я ошибаюсь, и вы можете предложить какой-нибудь лучший метод ?

 <section style="display: none;" id="sectionIepirkumi" class="w3-container w3-threequarter section">
  <div id="sectionTopLine" class="w3-border-top w3-border-green"></div>
  <h5 id="sectionAddress" class="w3-margin-bottom">
    <a id="sectionAddressFirstPageLink" class="sectionAddressLink" onclick="openSection('sectionFirstPage')">
          Sākumlapa </a>/
    <a class="sectionAddressLink" onclick="openSection('sectionAboutSchoolPage')"> Par Skolu </a>/
    <a class="" style="font-weight: bold;"> IEPIRKUMI</a>
  </h5>
  <div id="sectionBottomLine" class="w3-border-top w3-border-green w3-margin-bottom"></div>
  <div class="w3-panel w3-border">
    <h3>Uz doto momentu nav aktuālu iepirkumu!</h3>
  </div>
</section>
 
 function myFunction(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("w3-show") == -1) {
    x.className  = " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }
}

Комментарии:

1. Где вы называете мою функцию?

Ответ №1:

Вы усложняете это, потому что из-за этого(вместо использования if..else) существует метод classList, который позволяет переключать класс нужного элемента. Этот метод называется toggle().

Позже вы можете создать класс с именем .show , который изменит отображение вашего элемента на блокировку, когда элементу будет присвоен класс.

Напоминание : Никогда не используйте var , используйте let amp; const самый новый синтаксис. (ecma-сценарий 6)

 function myFunction() {
  const container = document.getElementById('sectionIepirkumi');
  
  container.classList.toggle('show');
};

document.querySelector('button').addEventListener('click', myFunction); 
 .show {
  display: block !important;
} 
 <button type='button'>Click</button>

<section style="display: none;" id="sectionIepirkumi" class="w3-container w3-threequarter section">
  <div id="sectionTopLine" class="w3-border-top w3-border-green"></div>
  <h5 id="sectionAddress" class="w3-margin-bottom">
    <a id="sectionAddressFirstPageLink" class="sectionAddressLink" onclick="openSection('sectionFirstPage')">
          Sākumlapa </a>/
    <a class="sectionAddressLink" onclick="openSection('sectionAboutSchoolPage')"> Par Skolu </a>/
    <a class="" style="font-weight: bold;"> IEPIRKUMI</a>
  </h5>
  <div id="sectionBottomLine" class="w3-border-top w3-border-green w3-margin-bottom"></div>
  <div class="w3-panel w3-border">
    <h3>Uz doto momentu nav aktuālu iepirkumu!</h3>
  </div>
</section>
Метки: