На одной из моих страниц у меня есть область внизу страницы, содержащая 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> 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 [JS]](https://i.imgur.com/WsjO6zJb.png)


Нет причин использовать 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> 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> 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.
Да, большое спасибо, все работает, это здорово, спасибо большое
Я обязан использовать jQuery, более того, он используется не только для этого элемента, он используется в нескольких местах на разных страницах. В этом случае я просто кладу проблемный участок. Но спасибо за быстрый и четкий ответ, я уже пробовал несколько вещей, но безуспешно, определенно синтаксическая ошибка с моей стороны