Question

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

代码如下所示

我创建了UL列表以创建标签
我创建了DIV作为要显示的页面
我创建了jquery mouseenter事件以显示与链接ID相同的div

我使用了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

尝试使用鼠标覆盖事件，例如：

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

});

Answer 2

删除（“。tab_pages div”）。hide（）;来自你的mouseenter（）事件。此外，在.tab_pages样式中，将position：absolute更改为float：left。如果您要使用绝对定位，则需要指定顶部或底部位置以及左侧或右侧位置，例如 - top：0px;左：0像素。但是由于您指定了30px的上边距，因此使用float - 绝对定位的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>

Answer 3

我已在http://codebins.com/bin/4ldqpam上为上述问题创建了完整的代码箱所以，试试吧。

要解决以下以下步骤：

1）首先在html标头标签上包含最新的jQuery.js 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();
});

使用jquery创建导航系统

3 个答案: