en utilisant jquery pour créer un système de navigation

Question

J'essaye de créer un système de menu où, quand une ancre de liste est cliquée, une div sous la liste ul est montrée. mais le système ne fonctionne pas et je ne peux pas contrôler si l'utilisateur est au-dessus du div affiché. Ci-dessous est le code où

• J'ai créé la liste UL pour créer des onglets
• j'ai créé DIVs sous forme de pages à afficher
• J'ai créé événement mouseenter jquery pour afficher la div avec la même classe que de ce lien ID

• J'ai utilisé la fonction mouseleave pour masquer la div affichée.

  <style> 
  .tabs_button ul {list-style:none; margin:0px; padding:0px;} 
  .tabs_button ul li {float:left; display:inline; margin-right:50px;} 
  .tabs_button ul li a{color:#FFF; text-decoration:none;} 
  .tabs_button ul li a:hover{color:#FFC222;} 
      .tab_pages{clear:both; position:absolute; } 
      .tab_pages div{display:none;width:200px; height:200px; background-   color:#CCC;margin-top:30px;} 
  </style> 
  <script> 
      $(document).ready(function(e) { 
      $(".tabs_button a").mouseenter(function(e) { 
      var tid=this.id; 
  $(".tab_pages div").hide(); 
       $(".tab_pages ."+tid).show(); 
       }); 
       $(".tabs_button a").mouseleave(function(e) { 
  var tid=this.id; 
       $(".tab_pages ."+tid).hide(); 
       }); 
  
       }); 
       </script> 
      <div class="tabs_button"> 
      <ul> 
      <li><a href="#" id="page1">Cars</a></li> 
      <li><a href="#" id="page2">Price & Offers</a></li> 
      <li><a href="#" id="page3">Chevy Experience</a></li> 
      <li><a href="#" id="page4">Service</a></li> 
      <li><a href="#" id="page5">Contact Us</a></li> 
       </ul> 
       </div> 
      <div class="tab_pages"> 
      <div class="page1"> 
      Cars Display Page 
       </div> 
       <div class="page2"> 
       Offers Display Page 
       </div> 
       <div class="page3"> 
       Chevy Exp Page 
       </div> 
       <div class="page4"> 
       Service Display Page 
       </div> 
        <div class="page5"> 
       Contact us Display Page 
       </div> 
        </div>  
  

Voici la partie principale j'ai problème est de garder montrant div si l'utilisateur est en vol stationnaire au-dessus de la div.

Edit: Fiddle

Answer 1

J'ai créé bin code complet pour le problème ci-dessus http://codebins.com/bin/4ldqpam Alors, ESSAYER.

Pour résoudre ce suivi étapes ci-dessous:

1) Inclure dernier fichier javascript jquery.js sur l'étiquette d'en-tête html premier.

2) HTML (peu changements)

<div class="tabs_button"> 
    <ul> 
    <li id="page1"> 
     <a href="#"> 
     Cars 
     </a> 
    </li> 
    <li id="page2"> 
     <a href="#"> 
     Price &amp; Offers 
     </a> 
    </li> 
    <li id="page3"> 
     <a href="#"> 
     Chevy Experience 
     </a> 
    </li> 
    <li id="page4"> 
     <a href="#"> 
     Service 
     </a> 
    </li> 
    <li id="page5"> 
     <a href="#"> 
     Contact Us 
     </a> 
    </li> 
    </ul> 
</div> 

<div class="tab_pages"> 
    <div class="page1"> 
    Cars Display Page 
    </div> 

    <div class="page2"> 
    Offers Display Page 
    </div> 

    <div class="page3"> 
    Chevy Exp Page 
    </div> 
    <div class="page4"> 
    Service Display Page 
    </div> 
    <div class="page5"> 
    Contact us Display Page 
    </div> 
</div> 

3) CSS (Ajouter peu plus de styles):

body{ 
    background-color:#000; 
} 
.tabs_button{ 
    width:950px; 
} 
.tabs_button ul { 
    list-style:none; 
    margin:0px; 
    padding:0px; 

} 
.tabs_button ul li { 
    width:120px; 
    float:left; 
    display:inline; 
    margin-left:10px; 
    margin-right:10px; 
    text-align:center: 

} 
.tabs_button ul li:hover a{ 
    color:#FFC222; 
} 
.tabs_button ul li:hover{ 
    background-color:#445566; 
} 
.tabs_button ul li a{ 
    color:#FFF; 
    text-decoration:none; 
} 
.tabs_button ul li a:hover{ 
    color:#FFC222; 
} 
.tabs_button ul li.selected a{ 
    color:#FFC222; 
} 
.tabs_button ul li.selected{ 
    background-color:#445566; 
} 
.tab_pages{ 
    clear:both; 
    position:absolute; 
} 
.tab_pages div{ 
    display:none; 
    width:120px; 
    height:200px; 
    color:#fff; 
    background-color:#445566; 
    margin-top:27px; 
    position:absolute; 
} 

4) JQuery pour la navigation Menu:

$(".tabs_button li,.tab_pages div").mouseenter(function() { 
    var className = $(this).attr('id'); 
    $(".tabs_button #" + className).removeClass("selected"); 
    if (typeof(className) == "undefined" || className == null) { 
     className = $(this).attr('class'); 
     $(".tabs_button li").removeClass("selected"); 
     $(".tabs_button #" + className).addClass("selected"); 
    } 

    $(".tab_pages div").hide(); 
    var offset = $(".tabs_button li#" + className).offset(); 
    $(".tab_pages ." + className).css({ 
     'left': offset.left - 8 
    }); 
    $(".tab_pages ." + className).show(); 
}); 

Answer 2

Essayez d'utiliser l'événement mousover au lieu, comme:.

$(".tabs_button a,.tab_pages").mouseover(function() { 

}); 

Answer 3

Retirez les (".tab_pages div") cacher(); de votre événement mouseenter(). En outre, dans le style .tab_pages, changez la position: absolute to float: left. Si vous deviez utiliser le positionnement absolu, vous devez spécifier une position supérieure ou inférieure et une position gauche ou droite, par exemple - top: 0px; à gauche: 0px. Mais puisque vous spécifiez une marge supérieure de 30px, utilisez float - les divs absolument positionnés ne peuvent pas avoir de marges ajoutées. Enfin, dans votre style .tabs_button ul li, l'affichage: inline ne fait rien - appeler float: left change le li en un élément block - ce que vous voulez. J'ai copié le code avec les changements ci-dessous - devrait travailler pour vous.

<style> 
    .tabs_button ul {list-style:none; margin:0px; padding:0px;} 
    .tabs_button ul li {float:left; margin-right:50px;} 
    .tabs_button ul li a{color:#FFF; text-decoration:none;} 
    .tabs_button ul li a:hover{color:#FFC222;} 
    .tab_pages{clear: both; float: left; } 
    .tab_pages div{display:none;width:200px; height:200px; background-color:#CCC;margin-top:30px;} 
</style> 

<script> 
    $(document).ready(function(e) { 

     $(".tabs_button a").mouseover(function(e) { 
      var tid=this.id; 
      $(".tab_pages ."+tid).stop().show(); 
     }); 


     $(".tabs_button a").mouseout(function(e) { 
     var tid=this.id; 
      $(".tab_pages ."+tid).stop().hide(); 
     }); 

     }); 
     </script> 
     <body> 
    <div class="tabs_button"> 
    <ul> 
    <li><a href="#" id="page1">Cars</a></li> 
    <li><a href="#" id="page2">Price &amp; Offers</a></li> 
    <li><a href="#" id="page3">Chevy Experience</a></li> 
    <li><a href="#" id="page4">Service</a></li> 
    <li><a href="#" id="page5">Contact Us</a></li> 
     </ul> 
    </div> 

    <div class="tab_pages"> 
    <div class="page1"> 
     Cars Display Page 
     </div> 

     <div class="page2"> 
     Offers Display Page 
     </div> 

     <div class="page3"> 
     Chevy Exp Page 
     </div> 
     <div class="page4"> 
     Service Display Page 
     </div> 
      <div class="page5"> 
     Contact us Display Page 
     </div> 
     </div>