Afficher et Cacher le menu (où ne montre qu'un seul à la fois)

Question

Im ayant un tel problème, j'ai un menu qui a un sous-contenu caché. Que lorsque l'utilisateur clique sur le bouton de navigation, du contenu caché apparaîtra. Cette partie est bien et tout fonctionne.

Ce que j'ai besoin de savoir, c'est quand j'ai un élément de nav montrant son contenu caché. Si l'utilisateur clique sur l'élément de nav suivant. Je voudrais que l'autre contenu caché disparaisse et que le nouveau contenu caché apparaisse.

Mon inspiration vient de ce site. http://www.o2.co.uk/ si vous cliquez sur les éléments de la flèche de navigation. Toute aide sur ce serait génial. D'ailleurs, tous les effets Show et Hide fonctionnent tous.

Merci Tous ceux qui peuvent aider ..

Answer 1

Je suppose que vous faites cela en javascript. Pardonnez-moi si je suis trop élémentaire ici.

Votre fonction (si vous pouvez le poster, ce serait utile) doit non seulement changer l'attribut d'affichage de l'élément sur lequel vous avez cliqué, mais aussi le changer pour afficher: none; pour tous les autres.

Ainsi, lorsque vous cliquez sur l'élément nav, votre javascript modifie l'attribut d'affichage de cette liste pour: bloquer ou autre, et modifie également toutes les autres listes à afficher: aucune. C'est un peu de force brute, donc vous pouvez aussi simplement changer les autres qui sont actuellement autre chose que: none à: none.

Answer 2

Vous aurez besoin jQuery pour cela, mais ...

d'abord nous attacher une fonction onClick à chaque élément avec le « lien » de la classe nous disons que onClick un clic, masquez tous les éléments avec la classe 'hidable', puis affiche la div avec l'ID de la valeur de l'attribut rel dans ce lien. http://api.fatherstorm.com/test/4159899.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
     <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script> 


    <script> 
      $(document).ready(function() { 
       $('.link').each(function(){ 
        $(this).click(function(){ 

         $('.hidable').hide(); 
         $($(this).attr('rel')).show(); 
        }); 

       }); 
      }); 

     </script> 



<ul> 

    <li class='link' rel='#div1'>l1</li> 
    <li class='link' rel='#div2'>l2</li> 
    <li class='link' rel='#div3'>l3</li> 
    <li class='link' rel='#div4'>l4</li> 
    <li class='link' rel='#div5'>l5</li> 

     </ul> 

    for the code block 
    <div class='hidable' id='div1'>div 1</div> 
    <div class='hidable' id='div2'>div 2</div> 
    <div class='hidable' id='div3'>div 3</div> 
    <div class='hidable' id='div4'>div 4</div> 
    <div class='hidable' id='div5'>div 5</div> 

Answer 3

Salut FatherStorm et Bikeboy389,

Merci pour vos commentaires. Oui, j'utilise Jquery. C'est ce que j'ai jusqu'ici.

JQUERY

<script type="text/javascript"> 
    $(function() { 
     $("#nav-box").hide(); 
     //run the currently selected effect 

     function runEffect(){ 
      //get effect type from 
      var selectedEffect = $('#effectTypes').val(); 
      var options = {}; 
      //run the effect 
      $("#nav-box").toggle("blind",options,500); 
      $(this).toggleClass("active").next().slideToggle("slow"); 
     }; 

     //set effect from select menu value 
     $("ul#main-nav li a.kingfisher").click(function() { 
      runEffect(); 
      return false; 
     });//Close Run Effect Function 

     $(document).ready(function(){ 
      $("#nav-box").hide(); 
       $("ul#main-nav li a.kingfisher").click(function(){ 
       $(this).toggleClass("active").next(); 
      }); 
     }); 

     $(document).ready(function(){ 
      $("#nav-box").hide(); 
       $("ul#main-nav li a.kingfisher").click(function(){ 
       $(".curve").toggleClass("active").next(); 
      }); 
     }); 

    });//Close Main Function 

    $(function() { 
     $("#nav-box").hide(); 
     //run the currently selected effect 

     function runEffect(){ 
      //get effect type from 
      var selectedEffect = $('#effectTypes').val(); 
      var options = {}; 
      //run the effect 
      $("#nav-box").toggle("blind",options,500); 
      $(this).toggleClass("active").next().slideToggle("slow"); 
     }; 

     //set effect from select menu value 
     $("ul#main-nav li a.dsm").click(function() { 
      runEffect(); 
      return false; 
     });//Close Run Effect Function 

     $(document).ready(function(){ 
      $("#nav-box").hide(); 
       $("ul#main-nav li a.dsm").click(function(){ 
       $(this).toggleClass("active").next(); 
      }); 
     }); 

     $(document).ready(function(){ 
      $("#nav-box").hide(); 
       $("ul#main-nav li a.dsm").click(function(){ 
       $(".curve").toggleClass("active").next(); 
      }); 
     }); 

    });//Close Main Function 
    </script> 

Et le HTML est

<ul id="main-nav"><!--Open Main Navigation with JQuery Dropdown--> 
      <li><a href="#" class="dsm">dsm Products</a></li> 
      <li><a href="#" class="kingfisher">kingfisher Products</a></li> 
      <li><a href="#" class="covertec" >covertec</a></li> 
     </ul><!--Close Main Navigation--> 

<div id="nav-box"> 
     <div class="kingfisher"> This is the content for the Kingfisher Products</div> 
     <div class="dsm">This is the content for the DSM products</div> 
    </div> 

Espérons que cela fait un peu plus de sens,

Fatherstorm, c'est exactement ce que je devais. Dans votre exemple, existe-t-il un moyen de masquer tous les divs lors du chargement de la page et d'avoir l'option sur quel lien cliquer?