0

リストアンカーをクリックすると、ulリストの下にdivが表示されるメニューシステムを作成しようとしています。しかし、システムが機能しておらず、ユーザーが表示されたdivを超えているかどうかを制御できません。以下はここにあるコードです

  • タブを作成するためのULリストを作成しました
  • 表示するページとしてDIVを作成しました
  • リンクのIDと同じクラスのdivを表示するjquerymouseenterイベントを作成しました

  • 表示されているdivを非表示にするためにmouseleave関数を使用しました。

     <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

代わりに、次のようにmousoverイベントを使用してみてください。

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

});
于 2012-07-17T03:40:40.753 に答える
0

（".tab_pages div"）。hide（）;を削除します。mouseenter（）イベントから。また、.tab_pagesスタイルで、position：absoluteをfloat：leftに変更します。絶対測位を使用する場合は、上または下の位置と左または右の位置のいずれかを指定する必要があります。たとえば、-top：0px; 左：0px。ただし、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>
于 2012-07-17T03:57:08.370 に答える
0

上記の問題の完全なコードビンをhttp://codebins.com/bin/4ldqpamで作成した ので、試してみてください。

これを解決するには、以下の手順に従います。

1）最初にhtmlヘッダータグに最新のjQuery.jsjavascriptファイルを含めます。

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 に答える