0

我正在尝试创建一个菜单系统，当单击列表锚点时，会显示 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 显示。

编辑：小提琴

4

3 回答 3

0

我已经在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();
});
于 2012-07-17T07:58:44.550 回答
0

删除 (".tab_pages div").hide(); 从你的 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>
于 2012-07-17T03:57:08.370 回答
0

尝试改用鼠标悬停事件，例如：

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

});
于 2012-07-17T03:40:40.753 回答