A voir également:
- Passez de jquery a js
- Trousseau mot de passe iphone - Guide
- Passer de qwerty a azerty - Guide
- Mot de passe - Guide
- Mot de passe administrateur - Guide
- Passer de windows 7 à windows 10 - Accueil - Mise à jour
2 réponses
Salut,
Une traduction de ton code jquery en javascript :
Pour l'appliquer sur chaque lien de ton menu, une solution possible :
Bonne journée
Une traduction de ton code jquery en javascript :
document.getElementById('lien1').addEventListener('click', function(e) {
e.preventDefault();
window.location = this.getAttribute('href');
document.getElementById('button').removeAttribute('checked');
});
Pour l'appliquer sur chaque lien de ton menu, une solution possible :
function maFonction(e) {
e.preventDefault();
window.location = this.getAttribute('href');
document.getElementById('button').removeAttribute('checked');
}
document.getElementById('lien1').addEventListener('click', maFonction);
document.getElementById('lien2').addEventListener('click', maFonction);
document.getElementById('lien3').addEventListener('click', maFonction);
// etc...
Bonne journée
ViriisXP
Messages postés
487
Date d'inscription
Statut
Membre
Dernière intervention
40
j'ai tenter mais ca ne fonctionne pas. désolé
j'ai mis mon menu ainsi :
mais :
ca marche pas !
:/
EDIT : AJOUT DES BALISES DE CODE.
je pense donc je suis !
<header>
<nav>
<input type="checkbox" id="button">
<label for="button" onclick></label>
<ul>
<li><a href="#S1" id="link1" title="Accueil" >Accueil</a></li>
<li><a href="#S2" id="link2" title="Découvrir">Découvrir</a></li>
<li><a href="#S3" id="link3" title="Le cadre">Le cadre</a></li>
<li><a href="#S4" id="link4" title="Tarifs">Tarifs</a></li>
<li><a href="#S5" id="link5" title="Horaires">Horaires</a></li>
<li><a href="#S6" id="link6" title="Produits">Produits</a></li>
<li><a href="#S7" id="link7" title="S'y rendre">S'y rendre</a></li>
<li><a href="#S8" id="link8" title="L'histoire">L'Histoire</a></li>
<li><a href="#S9" id="link9" title="Contact">Contact</a></li>
</ul>
</nav>
</header>
mais :
<script type="text/javascript">
function myFunction(e) {
e.preventDefault();
window.location = this.getAttribute('href');
document.getElementById('button').removeAttribute('checked');
}
document.getElementById("link1").addEventListener("click", myFunction);
document.getElementById("link2").addEventListener("click", myFunction);
document.getElementById("link3").addEventListener("click", myFunction);
document.getElementById("link4").addEventListener("click", myFunction);
//etc ...
/script>
ca marche pas !
:/
EDIT : AJOUT DES BALISES DE CODE.
je pense donc je suis !
Bonjour @pitet : mon menu possède sa fonction principale lors de la version mobile du site, la checkbox selectionné ouvre le menu qui contient tout les liens cités. je suis sur un on page website avec des liens ciblés à l'ancre. donc afin que le menu se referme quand je clic sur un lien de l'ancre j'ai compris que je ne pouvais pas faire ca en full css et donc que j'avais besoin d'un petit peu de js. mais le résultat avec ton code comparé au premier c'est que ca ne ferme pas le menu ... voila ...
du coup moi mon code actuel qui travaille :
merci en tout cas pour ton aide.
du coup moi mon code actuel qui travaille :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {$("#link1").click(closeThis);});
$(document).ready(function () {$("#link2").click(closeThis);});
$(document).ready(function () {$("#link3").click(closeThis);});
$(document).ready(function () {$("#link4").click(closeThis);});
$(document).ready(function () {$("#link5").click(closeThis);});
$(document).ready(function () {$("#link6").click(closeThis);});
$(document).ready(function () {$("#link7").click(closeThis);});
$(document).ready(function () {$("#link8").click(closeThis);});
$(document).ready(function () {$("#link9").click(closeThis);});
function closeThis() {
window.location = $(this).attr('href');
$("#button").removeAttr("checked");
}
</script>
merci en tout cas pour ton aide.