jQuery实现菜单栏导航效果

2019-11-19 15:48:09

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了jQuery实现菜单栏导航效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html> <head>  <meta charset="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>  <script type="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 div").hover(function(){/*鼠标放置在div位置上，显示下拉菜单*/     $(this).show();    },function(){/*鼠标离开在div位置上，隐藏下拉菜单*/     $(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>  <div id="top">   <ul>    <li class="li1">收藏夹</li>    <li class="li2">卖家中心</li>    <li class="li3">联系客服</li>   </ul>   <div class="shoucang position">    <p>收藏的宝贝</p>    <p>收藏的店铺</p>   </div>   <div class="sell position">    <p>免费开店</p>    <p>已出售的报宝贝</p>    <p>出售中的报宝贝</p>    <p>卖家服务市场</p>   </div>   <div class="customer position">    <p>消费者客服</p>    <p>卖家客服</p>   </div>  </div> </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：AngularJS日程表案例详解

下一篇：js实现网页的两个input标签内的数值加减(示例代码)