Использовать jQuery Toggle?

На одной из моих страниц у меня есть область внизу страницы, содержащая 9 кнопок, каждая кнопка открывает div onclick и закрывает его, если мы нажимаем кнопку (благодаря встроенной функции JavaScript).

Нет проблем, за исключением того, что я бы хотел, чтобы при нажатии на кнопку автоматически возвращалось содержимое предыдущей в display: none;.

Я включил jQuery, но мне трудно понять наиболее полезный инструмент. toggle - решение? След мыслей, пожалуйста.

function myFunction(button, id) {
    var x = document.getElementById(id);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
<div class = "zone-bas">
   <nav>
      <ul id = "menu">
         <li class = "nav1 menu-bas">
            <button class = "btnBas" onclick = "myFunction(this, 'page_publications');"><b>Publications</b> </button><!--el.classList.toggle('nom-class') dans le onclick. Regarder si fonctionne avec Id aussi-->
         </li>
         <li class = "nav2 menu-bas"><button class = "btnBas" onclick = "myFunction(this, 'page_associatif');"><b>Associatif</b> </button></li>
         <li class = "nav3 menu-bas"><button class = "btnBas" onclick = "myFunction(this, 'page_photos-videos');"><b>Photos/Vidéos</b></button></li>
         <li class = "nav4 menu-bas"><button class = "btnBas" onclick = "myFunction(this, 'page_boutique');"><b>Boutique</b></button></li>
         <li class = "nav5 menu-bas"><button class = "btnBas" onclick = "myFunction(this, 'page_jeux');"><b>Jeux concours</b></button></li>
         <li class = "nav6 menu-bas"><button class = "btnBas" onclick = "myFunction(this, 'page_evenements');"><b>Evènements</b></button></li>
         <li class = "nav7 menu-bas"><button class = "btnBas" onclick = "myFunction(this, 'page_prestation');"><b>Soumettre une prestation</b></button></li>
         <li class = "nav8 menu-bas"><button class = "btnBas" onclick = "myFunction(this, 'page_crowdfunding');"><b>Crowdfunding</b></button></li>
         <li class = "nav9 menu-bas"><button class = "btnBas" onclick = "myFunction(this, 'page_contact');"><b>Contacter</b></button></li>
      </ul>
   </nav>
</div>
<!--===\\\LES ELEMENTS DE LA NAV A AFFICHER///===-->
<!--===\\\=================================///===-->
<div class = "wrapconteneur">
<div class = "wrapper">
   <section id = "content">
      <!--===\\\ PAGE PUBLICATIONS ///===-->
      <!--===\\\===================///===-->
      <article id = "page_publications" style = "display:none;">
         <div class = "wrapper zone_texte">
            <div class = "container_9">
               <div class = "text">
                  <div class = "grid_7">
                     <div class = "pad_right1">
                        <p>&nbsp;CECI EST UN TEST D'AFFICHAGE</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </article>
      <!--===\\\ PAGE ASSOCIATIF ///===-->
      <!--===\\\=================///===-->                    
      <article id = "page_associatif" style = "display:none;">
         <div class = "wrapper zone_texte">
            <div class = "container_9">
               <div class = "text">
                  <div class = "grid_6">
                     <h1 class = "pad_bot1">titre de la page</h1>
                     <p>contenu libre ici </p>
                  </div>
               </div>
            </div>
         </div>
         <div class = "jrebandeau box_color box box_bandeau">
            <div class = "scroll">
               <ul class = "gallery1">
                  <li><img src='Images/'></li>
                  <li><img src='Images/'></li>
                  <li><img src='Images/'></li>
                  <li><img src='Images/'></li>
               </ul>
            </div>
         </div>
      </article>
      <!--===\\\ PAGE PHOTOS/VIDEOS ///===-->
      <!--===\\\====================///===-->                   
      <article id = "page_photos-videos" style = "display:none;">
         <div class = "wrapper zone_texte">
            <div class = "container_9">
               <div class = "text">
                  <div class = "grid_6">
                     <h1 class = "pad_bot1">titre de la page --></h1>
                     <p>contenu libre ici --></p>
                  </div>
               </div>
            </div>
         </div>
         <div class='jregal box_color' id='c96cf25167188b00c2d8288850341a7f'>
            <div class = "previousnext">
               <a href = "#" class = "previous"><img src = "images/arrow_left.png" width = "30"></a>
               <a href = "#" class = "next"><img src = "images/arrow_right.png" width = "30"></a>
            </div>
            <div class='gal_pics'>
               <img height='595' src='#' id=''  class='active' >
               <img height='595' src='#' id='' >
               <img height='595' src='#' id='' >
               <img height='595' src='#' id='' >
               <img height='595' src='#' id='' >
               <img height='595' src='#' id='' >
               <img height='595' src='#' id='' >
               <img height='595' src='#' id='' >
               <img height='595' src='#' id='' >
               <img height='595' src='#' id='' >
               <img height='595' src='#' id='' >
               <img height='595' src='#' id='' >
            </div>
            <div class = "gall_thumbs ">
               <div class = "scrollableArea">
                  <ul class='gallpan panactive'>
                     <li class='thumb_col'>
                        <a class='carre' href='#'><img src='#'></a>
                        <a class='carre' href='#'><img src='#'></a>
                        <a class='carre' href='#'><img src='#'></a>
                     </li>
                     <li class='thumb_col'>
                        <a class='carre' href='#'><img src='#'></a>
                        <a class='carre' href='#'><img src='#'></a>
                        <a class='carre' href='#'><img src='#'></a>
                     </li>
                  </ul>
                  <ul class='gallpan'>
                     <li class='thumb_col'>
                        <a class='carre' href='#'><img src='#'></a>
                        <a class='carre' href='#'><img src='#'></a>
                        <a class='carre' href='#'><img src='#'></a>
                     </li>
                  </ul>
                  <div>
                     <a href='#' style='color:white; margin-left: 200px;' target='_blank'>Liens vers ???</a>
                  </div>
               </div>
               <div class = "thumb_previousnext">
                  <a href = "#" class = "previous"><img src = "images/avant.png" width = "37"></a>
                  <a href = "#" class = "next"><img src = "images/apres.png" width = "37"></a>
               </div>
            </div>
            <!-- VIDEOS -->
            <!--\\\==///-->
            <!--===\\\ PAGE BOUTIQUE ///===-->
            <!--===\\\===============///===-->
            <article id = "page_boutique" style = "display:none;">
               <div class = "wrapper zone_texte">
                  <div class = "container_9">
                     <div class = "text">
                        <div class = "grid_6">
                           <h1 class = "pad_bot1">
                              <!-- titre de la page -->
                           </h1>
                           <p>
                              <!-- contenu libre ici -->
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
               <!--===\\\ PAGE JEUX CONCOURS ///===-->
               <!--===\\\====================///===-->
               <article id = "page_jeux" style = "display:none;">
                  <div class = "wrapper zone_texte">
                     <div class = "container_9">
                        <div class = "text">
                           <div class = "grid_6">
                              <h1 class = "pad_bot1">
                                 <!-- titre de la page -->
                              </h1>
                              <br />
                              <p>
                                 <!-- contenu libre ici -->
                              </p>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--===\\\ PAGE EVENEMENTS ///===-->
                  <!--===\\\=================///===-->
                  <article id = "page_evenements" style = "display:none;">
                     <div class = "wrapper zone_texte">
                        <div class = "container_9">
                           <div class = "text">
                              <div class = "grid_6">
                                 <h1 class = "pad_bot1">titre de la page ici --></h1>
                                 <p>contenu libre ici --></p>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!--===\\\ PAGE PRESTATION ///===-->
                     <!--===\\\=================///===-->                    
                     <article id = "page_prestation" style = "display:none;">
                        <div class = "wrapper zone_texte">
                           <div class = "container_9">
                              <div class = "text">
                                 <div class = "grid_6">
                                    <h1 class = "pad_bot1">titre de la page --></h1>
                                    <p>contenu libre ici (un formulaire ici? A définir) --></p>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </article>
                     <!--===\\\ PAGE CROWDFUNDING ///===-->
                     <!--===\\\===================///===-->                    
                     <article id = "page_crowdfunding" style = "display:none;">
                        <div class = "wrapper zone_texte">
                           <div class = "container_9">
                              <div class = "text">
                                 <div class = "grid_6">
                                    <h1 class = "pad_bot1">titre de la page --></h1>
                                    <p>contenu libre ici (un formulaire ici? A définir) --></p>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </article>
                     <!--===\\\ PAGE CONTACT ///===-->
                     <!--===\\\==============///===-->
                     <article id = "page_contact" style = "display:none;">
                        <!--===\\\ FORMULAIRE DE CONTACT ///===-->
                        <!--===\\\=======================///===-->
                     </article>
                  </article>
               </article>
            </article>
         </div>
      </article>
   </section>
</div>
<!-- the code is not complete in this exemple, so the end of this exemple is just here to close the div ... -->
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
38
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Нет причин использовать jQuery только для одного метода. Чтобы добиться того, что вам нужно, вы можете просто выбрать все остальные элементы article, а затем скрыть их, прежде чем скрывать / показывать тот, который связан с кнопкой, по которой была нажата.

Вы также можете упростить и улучшить свою логику, удалив устаревший встроенный атрибут события onclick и используя ненавязчивые обработчики событий, например:

document.querySelectorAll('.btnBas').forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    var id = this.dataset.target;

    document.querySelectorAll('#content article').forEach(function(el) {
      if (el.id != id)
        el.style.display = 'none';
    });

    var target = document.getElementById(id);
    target.style.display = target.style.display == 'none' ? 'block' : 'none';
  });
});
<div class = "zone-bas">
  <nav>
    <ul id = "menu">
      <li class = "nav1 menu-bas"><button class = "btnBas" data-target = "page_publications"><b>Publications</b> </button>
      </li>
      <li class = "nav2 menu-bas"><button class = "btnBas" data-target = "page_associatif"><b>Associatif</b> </button></li>
      <li class = "nav3 menu-bas"><button class = "btnBas" data-target = "page_photos-videos"><b>Photos/Vidéos</b></button></li>
      <li class = "nav4 menu-bas"><button class = "btnBas" data-target = "page_boutique"><b>Boutique</b></button></li>
      <li class = "nav5 menu-bas"><button class = "btnBas" data-target = "page_jeux"><b>Jeux concours</b></button></li>
      <li class = "nav6 menu-bas"><button class = "btnBas" data-target = "page_evenements"><b>Evènements</b></button></li>
      <li class = "nav7 menu-bas"><button class = "btnBas" data-target = "page_prestation"><b>Soumettre une prestation</b></button></li>
      <li class = "nav8 menu-bas"><button class = "btnBas" data-target = "page_crowdfunding"><b>Crowdfunding</b></button></li>
      <li class = "nav9 menu-bas"><button class = "btnBas" data-target = "page_contact"><b>Contacter</b></button></li>
    </ul>
  </nav>
</div>

<!--===\\\LES ELEMENTS DE LA NAV A AFFICHER///===-->
<!--===\\\=================================///===-->
<div class = "wrapconteneur">
  <div class = "wrapper">
    <section id = "content">
      <!--===\\\ PAGE PUBLICATIONS ///===-->
      <!--===\\\===================///===-->
      <article id = "page_publications" style = "display:none;">
        <div class = "wrapper zone_texte">
          <div class = "container_9">
            <div class = "text">
              <div class = "grid_7">
                <div class = "pad_right1">
                  <p>&nbsp;CECI EST UN TEST D'AFFICHAGE</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </article>
      <!--===\\\ PAGE ASSOCIATIF ///===-->
      <!--===\\\=================///===-->
      <article id = "page_associatif" style = "display:none;">
        <div class = "wrapper zone_texte">
          <div class = "container_9">
            <div class = "text">
              <div class = "grid_6">
                <h1 class = "pad_bot1">titre de la page</h1>
                <p>contenu libre ici </p>
              </div>
            </div>
          </div>
        </div>
        <div class = "jrebandeau box_color box box_bandeau">
          <div class = "scroll">
            <ul class = "gallery1">
              <li><img src='Images/'></li>
              <li><img src='Images/'></li>
              <li><img src='Images/'></li>
              <li><img src='Images/'></li>
            </ul>
          </div>
        </div>
      </article>
      <!--===\\\ PAGE PHOTOS/VIDEOS ///===-->
      <!--===\\\====================///===-->
      <article id = "page_photos-videos" style = "display:none;">
        <div class = "wrapper zone_texte">
          <div class = "container_9">
            <div class = "text">
              <div class = "grid_6">
                <h1 class = "pad_bot1">titre de la page --></h1>
                <p>contenu libre ici --></p>
              </div>
            </div>
          </div>
        </div>
        <div class='jregal box_color' id='c96cf25167188b00c2d8288850341a7f'>
          <div class = "previousnext">
            <a href = "#" class = "previous"><img src = "images/arrow_left.png" width = "30"></a>
            <a href = "#" class = "next"><img src = "images/arrow_right.png" width = "30"></a>
          </div>
          <div class='gal_pics'>
            <img height='595' src='#' id='' class='active'>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
          </div>
          <div class = "gall_thumbs ">
            <div class = "scrollableArea">
              <ul class='gallpan panactive'>
                <li class='thumb_col'>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                </li>
                <li class='thumb_col'>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                </li>
              </ul>
              <ul class='gallpan'>
                <li class='thumb_col'>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                </li>
              </ul>
              <div>
                <a href='#' style='color:white; margin-left: 200px;' target='_blank'>Liens vers ???</a>
              </div>
            </div>
            <div class = "thumb_previousnext">
              <a href = "#" class = "previous"><img src = "images/avant.png" width = "37"></a>
              <a href = "#" class = "next"><img src = "images/apres.png" width = "37"></a>
            </div>
          </div>
          <!-- VIDEOS -->
          <!--\\\==///-->

          <!--===\\\ PAGE BOUTIQUE ///===-->
          <!--===\\\===============///===-->
          <article id = "page_boutique" style = "display:none;">
            <div class = "wrapper zone_texte">
              <div class = "container_9">
                <div class = "text">
                  <div class = "grid_6">
                    <h1 class = "pad_bot1">
                      <!-- titre de la page -->
                    </h1>
                    <p>
                      <!-- contenu libre ici -->
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <!--===\\\ PAGE JEUX CONCOURS ///===-->
            <!--===\\\====================///===-->
            <article id = "page_jeux" style = "display:none;">
              <div class = "wrapper zone_texte">
                <div class = "container_9">
                  <div class = "text">
                    <div class = "grid_6">
                      <h1 class = "pad_bot1">
                        <!-- titre de la page -->
                      </h1><br />
                      <p>
                        <!-- contenu libre ici -->
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <!--===\\\ PAGE EVENEMENTS ///===-->
              <!--===\\\=================///===-->
              <article id = "page_evenements" style = "display:none;">
                <div class = "wrapper zone_texte">
                  <div class = "container_9">
                    <div class = "text">
                      <div class = "grid_6">
                        <h1 class = "pad_bot1">titre de la page ici --></h1>
                        <p>contenu libre ici --></p>
                      </div>
                    </div>
                  </div>
                </div>
                <!--===\\\ PAGE PRESTATION ///===-->
                <!--===\\\=================///===-->
                <article id = "page_prestation" style = "display:none;">
                  <div class = "wrapper zone_texte">
                    <div class = "container_9">
                      <div class = "text">
                        <div class = "grid_6">
                          <h1 class = "pad_bot1">titre de la page --></h1>
                          <p>contenu libre ici (un formulaire ici? A définir) --></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </article>
                <!--===\\\ PAGE CROWDFUNDING ///===-->
                <!--===\\\===================///===-->
                <article id = "page_crowdfunding" style = "display:none;">
                  <div class = "wrapper zone_texte">
                    <div class = "container_9">
                      <div class = "text">
                        <div class = "grid_6">
                          <h1 class = "pad_bot1">titre de la page --></h1>
                          <p>contenu libre ici (un formulaire ici? A définir) --></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </article>
                <!--===\\\ PAGE CONTACT ///===-->
                <!--===\\\==============///===-->
                <article id = "page_contact" style = "display:none;">
                  <!--===\\\ FORMULAIRE DE CONTACT ///===-->
                  <!--===\\\=======================///===-->
                </article>
              </article>
            </article>
          </article>
        </div>
      </article>
    </section>
  </div>
  <!-- the code is not complete in this exemple, so the end of this exemple is just here to close the div ... -->

I have an obligation to use jQuery...

В этом случае:

$('.btnBas').on('click', function(e) {
  e.preventDefault();
  $('#content article').not(this).hide();
  $('#' + $(this).data('target')).toggle();
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "zone-bas">
  <nav>
    <ul id = "menu">
      <li class = "nav1 menu-bas"><button class = "btnBas" data-target = "page_publications"><b>Publications</b></button></li>
      <li class = "nav2 menu-bas"><button class = "btnBas" data-target = "page_associatif"><b>Associatif</b> </button></li>
      <li class = "nav3 menu-bas"><button class = "btnBas" data-target = "page_photos-videos"><b>Photos/Vidéos</b></button></li>
      <li class = "nav4 menu-bas"><button class = "btnBas" data-target = "page_boutique"><b>Boutique</b></button></li>
      <li class = "nav5 menu-bas"><button class = "btnBas" data-target = "page_jeux"><b>Jeux concours</b></button></li>
      <li class = "nav6 menu-bas"><button class = "btnBas" data-target = "page_evenements"><b>Evènements</b></button></li>
      <li class = "nav7 menu-bas"><button class = "btnBas" data-target = "page_prestation"><b>Soumettre une prestation</b></button></li>
      <li class = "nav8 menu-bas"><button class = "btnBas" data-target = "page_crowdfunding"><b>Crowdfunding</b></button></li>
      <li class = "nav9 menu-bas"><button class = "btnBas" data-target = "page_contact"><b>Contacter</b></button></li>
    </ul>
  </nav>
</div>

<!--===\\\LES ELEMENTS DE LA NAV A AFFICHER///===-->
<!--===\\\=================================///===-->
<div class = "wrapconteneur">
  <div class = "wrapper">
    <section id = "content">
      <!--===\\\ PAGE PUBLICATIONS ///===-->
      <!--===\\\===================///===-->
      <article id = "page_publications" style = "display:none;">
        <div class = "wrapper zone_texte">
          <div class = "container_9">
            <div class = "text">
              <div class = "grid_7">
                <div class = "pad_right1">
                  <p>&nbsp;CECI EST UN TEST D'AFFICHAGE</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </article>
      <!--===\\\ PAGE ASSOCIATIF ///===-->
      <!--===\\\=================///===-->
      <article id = "page_associatif" style = "display:none;">
        <div class = "wrapper zone_texte">
          <div class = "container_9">
            <div class = "text">
              <div class = "grid_6">
                <h1 class = "pad_bot1">titre de la page</h1>
                <p>contenu libre ici </p>
              </div>
            </div>
          </div>
        </div>
        <div class = "jrebandeau box_color box box_bandeau">
          <div class = "scroll">
            <ul class = "gallery1">
              <li><img src='Images/'></li>
              <li><img src='Images/'></li>
              <li><img src='Images/'></li>
              <li><img src='Images/'></li>
            </ul>
          </div>
        </div>
      </article>
      <!--===\\\ PAGE PHOTOS/VIDEOS ///===-->
      <!--===\\\====================///===-->
      <article id = "page_photos-videos" style = "display:none;">
        <div class = "wrapper zone_texte">
          <div class = "container_9">
            <div class = "text">
              <div class = "grid_6">
                <h1 class = "pad_bot1">titre de la page --></h1>
                <p>contenu libre ici --></p>
              </div>
            </div>
          </div>
        </div>
        <div class='jregal box_color' id='c96cf25167188b00c2d8288850341a7f'>
          <div class = "previousnext">
            <a href = "#" class = "previous"><img src = "images/arrow_left.png" width = "30"></a>
            <a href = "#" class = "next"><img src = "images/arrow_right.png" width = "30"></a>
          </div>
          <div class='gal_pics'>
            <img height='595' src='#' id='' class='active'>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
            <img height='595' src='#' id=''>
          </div>
          <div class = "gall_thumbs ">
            <div class = "scrollableArea">
              <ul class='gallpan panactive'>
                <li class='thumb_col'>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                </li>
                <li class='thumb_col'>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                </li>
              </ul>
              <ul class='gallpan'>
                <li class='thumb_col'>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                  <a class='carre' href='#'><img src='#'></a>
                </li>
              </ul>
              <div>
                <a href='#' style='color:white; margin-left: 200px;' target='_blank'>Liens vers ???</a>
              </div>
            </div>
            <div class = "thumb_previousnext">
              <a href = "#" class = "previous"><img src = "images/avant.png" width = "37"></a>
              <a href = "#" class = "next"><img src = "images/apres.png" width = "37"></a>
            </div>
          </div>
          <!-- VIDEOS -->
          <!--\\\==///-->

          <!--===\\\ PAGE BOUTIQUE ///===-->
          <!--===\\\===============///===-->
          <article id = "page_boutique" style = "display:none;">
            <div class = "wrapper zone_texte">
              <div class = "container_9">
                <div class = "text">
                  <div class = "grid_6">
                    <h1 class = "pad_bot1">
                      <!-- titre de la page -->
                    </h1>
                    <p>
                      <!-- contenu libre ici -->
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <!--===\\\ PAGE JEUX CONCOURS ///===-->
            <!--===\\\====================///===-->
            <article id = "page_jeux" style = "display:none;">
              <div class = "wrapper zone_texte">
                <div class = "container_9">
                  <div class = "text">
                    <div class = "grid_6">
                      <h1 class = "pad_bot1">
                        <!-- titre de la page -->
                      </h1><br />
                      <p>
                        <!-- contenu libre ici -->
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <!--===\\\ PAGE EVENEMENTS ///===-->
              <!--===\\\=================///===-->
              <article id = "page_evenements" style = "display:none;">
                <div class = "wrapper zone_texte">
                  <div class = "container_9">
                    <div class = "text">
                      <div class = "grid_6">
                        <h1 class = "pad_bot1">titre de la page ici --></h1>
                        <p>contenu libre ici --></p>
                      </div>
                    </div>
                  </div>
                </div>
                <!--===\\\ PAGE PRESTATION ///===-->
                <!--===\\\=================///===-->
                <article id = "page_prestation" style = "display:none;">
                  <div class = "wrapper zone_texte">
                    <div class = "container_9">
                      <div class = "text">
                        <div class = "grid_6">
                          <h1 class = "pad_bot1">titre de la page --></h1>
                          <p>contenu libre ici (un formulaire ici? A définir) --></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </article>
                <!--===\\\ PAGE CROWDFUNDING ///===-->
                <!--===\\\===================///===-->
                <article id = "page_crowdfunding" style = "display:none;">
                  <div class = "wrapper zone_texte">
                    <div class = "container_9">
                      <div class = "text">
                        <div class = "grid_6">
                          <h1 class = "pad_bot1">titre de la page --></h1>
                          <p>contenu libre ici (un formulaire ici? A définir) --></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </article>
                <!--===\\\ PAGE CONTACT ///===-->
                <!--===\\\==============///===-->
                <article id = "page_contact" style = "display:none;">
                  <!--===\\\ FORMULAIRE DE CONTACT ///===-->
                  <!--===\\\=======================///===-->
                </article>
              </article>
            </article>
          </article>
        </div>
      </article>
    </section>
  </div>
  <!-- the code is not complete in this exemple, so the end of this exemple is just here to close the div ... -->

Я обязан использовать jQuery, более того, он используется не только для этого элемента, он используется в нескольких местах на разных страницах. В этом случае я просто кладу проблемный участок. Но спасибо за быстрый и четкий ответ, я уже пробовал несколько вещей, но безуспешно, определенно синтаксическая ошибка с моей стороны

Seb_le_Barde 09.01.2019 17:26

Я обновил ответ, чтобы показать вам реализацию jQuery.

Rory McCrossan 09.01.2019 17:28

Да, большое спасибо, все работает, это здорово, спасибо большое

Seb_le_Barde 09.01.2019 17:32

Другие вопросы по теме