使用jquery来创建导航系统

Question

我想创建一个菜单系统，当点击列表锚点时，会显示ul列表下方的div。但系统不工作，我无法控制用户是否在显示的div上。 这里下面就是

• 我创建了UL列表创建标签
• 我创建的DIV作为显示
• 我创建的jQuery MouseEnter事件显示与同一类股利作为页面的代码链接的ID

• 我用mouseleave函数来隐藏显示的div。

  <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>  
  

这里我有问题的主要部分是保持DIV的表现，如果用户悬停在div中。

编辑：Fiddle

Answer 1

我已创建了完全码仓上面的问题上http://codebins.com/bin/4ldqpam 这样，尝试就可以了。

为了解决这个问题请遵循以下步骤：

1）包括最新的jquery.js在HTML头标记javascript文件第一。

2）HTML（点点的变化）

<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（添加几个样式）：

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的菜单导航：

$(".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

尝试使用mousover事件相反，像：

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

}); 

Answer 3

删除（ “.tab_pages格”）隐藏（）;来自你的mouseenter（）事件。另外，在.tab_pages样式中，将position：absolute更改为float：left。如果您要使用绝对定位，则需要指定顶部或底部位置以及左侧或右侧位置，例如 - top：0px;左：0像素。但是，由于您指定的是30px的顶部边距，请使用浮点数 - 绝对定位的div不能将边距添加到它们。最后，在.tabs_button ul li样式中，display：inline不会执行任何操作 - 调用float：left将li更改为块元素 - 这正是您想要的。我已经复制下面的变化的代码 - 应该为你工作。

<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>