Maison > Article > interface Web > jQuery fait fonctionner la barre de navigation dans les menus

jQuery fait fonctionner la barre de navigation dans les menus

php中世界最好的语言original: 2018-04-19 16:19:021512parcourir

<!DOCTYPE html>
<html>
 <head>
  <metacharset="UTF-8">
  <title></title>
  <style>
  *{
   padding: 0px;
   margin: 0px;
  }
   #top{width: auto;height: 30px;background: #eee;position: relative;}
   #top li{float: left;
     text-align: center;
     width: 80px;
     height:30px;
     line-height:30px;
     list-style: none;
    }
    /*设置位置*/
   .position{
    position: absolute;
    border: 1px solid #ccc;
    top:30px;
    padding: 3px;
    font-size: 15px;
    display: none;
   }
   .shoucang{width: auto;left: 10px;}
   .sell{width: auto;left: 70px;}
   .customer{width: auto;left: 180px;}
   .bg{background-color: #DDA0DD;cursor: pointer;}
  </style>
  <scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>
  <script>
   $(function(){
    $(".li1").hover(function(){
     $(".shoucang").show();/*显示收藏的菜单内容*/
     $(".customer,.sell").hide();/*隐藏其他的菜单内容*/
    },function(){
     $(".shoucang").hide();/*鼠标离开，收藏的菜单内容隐藏*/
    });
    $(".li2").hover(function(){
     $(".sell").show();
     $(".customer,.shoucang").hide();
    },function(){
     $(".sell").hide();
    });
    $(".li3").hover(function(){
     $(".customer").show();
     $(".shoucang,.sell").hide();
    },function(){
     $(".customer").hide();
    });
    $("#top p").hover(function(){/*鼠标放置在p位置上，显示下拉菜单*/
     $(this).show();
    },function(){/*鼠标离开在p位置上，隐藏下拉菜单*/
     $(this).hide();
    });
    $(".sell p,.shoucang p,.customer p").bind("mouseover",function(){
     $(this).addClass("bg");
    });
    $(".sell p,.shoucang p,.customer p").bind("mouseout",function(){
     $(this).removeClass("bg");
    });
   });
  </script>
 </head>
 <body>
  <pid="top">
   <ul>
    <liclass="li1">收藏夹</li>
    <liclass="li2">卖家中心</li>
    <liclass="li3">联系客服</li>
 
   </ul>
   <pclass="shoucang position">
    <p>收藏的宝贝</p>
    <p>收藏的店铺</p>
   </p>
   <pclass="sell position">
    <p>免费开店</p>
    <p>已出售的报宝贝</p>
    <p>出售中的报宝贝</p>
    <p>卖家服务市场</p>
   </p>
   <pclass="customer position">
    <p>消费者客服</p>
    <p>卖家客服</p>
   </p>
  </p>
 </body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Nombre de mots dans la zone de saisie de l'opération jQuery

Effet fixe de la barre supérieure de table jQuery

Explication détaillée de l'utilisation de l'extension du plug-in jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Effet fixe de la barre supérieure de table jQueryArticle suivant：Effet fixe de la barre supérieure de table jQuery

Articles Liés

Voir plus