利用JQuery实现简单的菜单栏导航

本文详细介绍了如何借助JQuery库,轻松实现一个交互式的菜单栏导航。通过选择器定位元素,添加事件监听器,动态改变DOM元素的样式,实现了菜单项的高亮和下拉子菜单的显示隐藏效果,提高了用户体验。
<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值