Masquer et afficher les éléments en utilisant Javascript

Question

J'ai un en-tête pour la page avec la navigation horizontale du menu comme AB C. A les sous menus D, E et B a les sous-menus F et G. Par défaut, les en-têtes F et G hidden.now quand je clique sur B, F et G devraient être visibles alors que D et E devraient être cachés. J'ai créé une petite fonction qui définit la propriété d'affichage des sous-menus lorsque leurs menus respectifs sont cliqués, cela fonctionne mais lorsque la page se charge, je reviens à la case départ, ce qui signifie que D et E sont affichés et F et G sont cachés.

Comment résoudre ceci en utilisant javascript? Je suis très nouveau à js donc ne pas penser en termes de jquery.

Answer 1

si possible, vous pouvez ajouter un hachage # à la nouvelle URL. Cherchez cela et basez-vous pour montrer via JavaScript.

Pseudo Code: Example Here - Source to example here

var hash = location.hash 
if(hash == '#menuA' || hash == '') { 
    //show menuA 
} else if(hash == '#menuB') { 
    // show B 
.....etc 

Answer 2

Vous pouvez définir un cookie avec des informations sur le menu sélectionné, puis lire le cookie et définir le menu de manière appropriée lorsqu'une page est chargée. Vous pouvez trouver quelques bonnes fonctions de coupe-cookie ici: http://www.quirksmode.org/js/cookies.html

Answer 3

Désolé, je sais assez bien que jQuery pour accomplir ce que je pense que vous voulez désinvolture. Peut-être que le pseudo-code aidera. Cela peut être utile si vous publiez le code HTML que vous avez utilisé pour créer les sous-menus.

Cet exemple associe simplement un élément nav à un objet sur la page.

SCRIPT (de préférence dans un fichier .js externe lié par toutes les pages):

//after you've set all sub-menus to display:none 

//for each nav element 
$('#nav a').each(function(){ //just like a for loop 
    var a,b; 
    // set a equal to the contents of the current nav element in the loop 
    a =$(this).html(); 
    //set b equal to the contents of the first <h2> element on the current page 
    //or to whatever you want to use to distinguish as "a match" (needs not be visible) 
    b =$('h2:first').html(); 
    //if the match is made... in this case, an exact match 
    if(a == b){ 
      //Here you would have your display children code 
      //or display D and E or F and G code, depending on how you've set it up    
     }else //code to execute if no match is made 
    }); 

je devais comprendre cela pour un projet d'équipe ... J'ai beaucoup à apprendre aussi. Aimez-le

Answer 4

C'est assez simple via jQuery, en fait. Je me suis moqué d'un menu très basique avec des listes non ordonnées et des éléments de liste here.

Je sais que vous avez mentionné que vous êtes très novice en JavaScript, et je comprends certainement, mais se familiariser avec des frameworks comme jQuery est absolument essentiel. La fonctionnalité de sélecteur dans jQuery est extrêmement puissante.