javascript - 使用 jQuery 切换？

标签 javascript jquery html toggle show-hide

在我的一个页面中，我在页面底部有一个区域包含 9 个按钮，每个按钮都会打开一个 onclick div 并在我们单击按钮时关闭它(感谢原生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 ... -->

最佳答案

没有理由只为一种方法使用 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 ... -->

关于javascript - 使用 jQuery 切换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54114239/

上一篇：html - 两端的 Bootstrap Nav 和 Flexbox 元素对齐问题

下一篇：html - 幻灯片下拉打开

相关文章：

javascript - JavaScript WebSocket.send 方法会阻塞吗？

javascript - 使用 JavaScript/jQuery 来操作图像链接 url？

html - 如何使 Bootstrap 导航栏在移动菜单上下推整个页面？

javascript - 如何使视频背景响应？

jquery - 为多个表着色奇数行

javascript - "done() called multiple times" Mocha 月鹅

javascript - OpenLayers 选择要素和 XY

JavaScript 返回函数

javascript - 正则表达式 : replace everything but not a specific word

jQuery:循环遍历复选框并存储在数组中？

©2024 IT工具网  联系我们