jQuery Girl
  1. jQuery Girl
  3. la page entière se lève lorsque je clique sur la balise de fond du menu
Intereting Posts
Ajax NetworkError: une erreur réseau s’est produite Quel composant de l’API Google Maps est utilisé pour générer des cartes traçant de nombreuses adresses? désactiver le script de barre de navigation fixe sur le mobile JQuery .ajax échoue lorsque le nom d’utilisateur d’authentification de base a le symbole @ (ios / cordova) Jquery UI autocomplete – images DANS la superposition des résultats, pas à l’extérieur comme la démo jquery reset after () Comment utiliser «queue» ou «différé» dans quelles conditions? Quel est leur but de conception? Faire que les fonctions attendent que l’appel AJAX soit terminé avec jQuery jquery, active la première entrée activée ou sélectionne une zone de texte sur la page. traverser des éléments HTML DOM dans jQuery Importer iCal (ics) avec le calendrier complet? Comment obtenir une référence au nouvel object DOM après avoir modifié le contenu avec outerHTML? Pourquoi les événements côté client ASP.net RadioButtonList onchange ne déclenchent-ils pas? La méthode Web ASP.NET qui accepte une liste échoue avec «le nom de la méthode de service Web n’est pas valide» jQuery datepicker – Comment changer la date “aujourd’hui”?

la page entière se lève lorsque je clique sur la balise de fond du menu

le code suivant fonctionne bien
ERREUR
– Quand je clique sur la dernière balise du menu, la page entière se déplace vers le haut, comment résoudre l’erreur

HTML 

    Blueprint: Vertical Icon Menu     body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;} body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;} a {text-decoration: none;} a:hover {color: #000;} #header{height: 90px;width: 100%;background-color: #B9F5BB;} #footer{height: 50px;width: 100%;background-color: #FDD5CB;} .dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; } .postleftmen{width:25%;float:left;color:#f0f0f0;} div.subcte456{color: red;}     
  
 
 
 sanoj  
electronics
 
vehicles
 
home
 
pets
 
books
 
clothing
 
kids
 
sport
 
service
 
jobs
 
real estate
 
 
 
   function mob() { hidemenus(); document.getElementById('mobi').style.display = "block"; } function ele() { hidemenus(); document.getElementById('elec').style.display = "block"; } function veh() { hidemenus(); document.getElementById('vehi').style.display = "block"; } function hme() { hidemenus(); document.getElementById('home').style.display = "block"; } function pet() { hidemenus(); document.getElementById('pets').style.display = "block"; } function bok() { hidemenus(); document.getElementById('book').style.display = "block"; } function clo() { hidemenus(); document.getElementById('clot').style.display = "block"; } function kid() { hidemenus(); document.getElementById('kids').style.display = "block"; } function spo() { hidemenus(); document.getElementById('spor').style.display = "block"; } function ser() { hidemenus(); document.getElementById('serv').style.display = "block"; } function job() { hidemenus(); document.getElementById('jobs').style.display = "block"; } function rel() { hidemenus(); document.getElementById('real').style.display = "block"; } function hidemenus() { document.getElementById('mobi').style.display = "none"; document.getElementById('elec').style.display = "none"; document.getElementById('vehi').style.display = "none"; document.getElementById('home').style.display = "none"; document.getElementById('pets').style.display = "none"; document.getElementById('book').style.display = "none"; document.getElementById('clot').style.display = "none"; document.getElementById('kids').style.display = "none"; document.getElementById('spor').style.display = "none"; document.getElementById('serv').style.display = "none"; document.getElementById('jobs').style.display = "none"; document.getElementById('real').style.display = "none"; }

CE DONT J’AI BESOIN

  • quand je clique sur le dernier dans le menu, il devrait afficher le résultat sans passer en haut de la page
    OU
    Dois-je créer une barre de défilement pour le menu

En bref: 

 real estate function rel() { hidemenus(); document.getElementById('real').style.display = "block"; return false; // <-- will prevent the anchor # link from trigerring }

Et répétez pour tous vos liens et fonctions

Et réponse alternative (et meilleure OMI).

La méthode return false n’est pas conforme au W3C (comme c’est non documenté), mais cela fonctionne depuis des siècles, donc nous le faisons. La méthode “appropriée” consiste à utiliser l’object event: 

 real estate

Javascript: 

 function rel(event) { event.preventDefault(); // This prevents the a tag (link) to act as like a link, which would no hidemenus(); document.getElementById('real').style.display = "block"; }

Et en réalité, vous pouvez effectuer quelques optimisations ici: 

 real estate function showmenu(event) { event.preventDefault(); // This prevents the a tag (link) to act as like a link, which would no hidemenus(); document.getElementById(event.target.getAtsortingbute("data-menu")).style.display = "block"; } // This works for IE9 and above function hidemenus() { var elements = document.getElementsByClassName("answer_list"); for (var i in elements) { if (elements[i] instanceof HTMLElement) { elements[i].style.display = "none"; } } }

De cette façon, il n’est pas nécessaire de définir un gestionnaire de clics distinct pour chaque lien. Notez que event.target est l’object HTMLElement lequel l’utilisateur a cliqué, qui est dans ce cas le lien.

La fonction hidemenus() j’ai fournie supprime également la nécessité d’avoir une fonctionnalité codée en dur. La raison de la vérification des elements[i] instanceof HTMLElement est due au fait que getElementsByClassName parfois la longueur du tableau, ce qui endommagerait le code.

Violon avec le code complet: http://jsfiddle.net/g4qvtod2/1/

Une méthode encore plus avancée consiste à attacher des écouteurs d’événements au lien de manière dynamic à l’aide de addEventListener . Vous pouvez essayer cela comme exercice.