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

最新推荐文章于 2025-07-19 09:52:22 发布

原创最新推荐文章于 2025-07-19 09:52:22 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #导航

Java 同时被 2 个专栏收录

8 篇文章

订阅专栏

JScript

3 篇文章

订阅专栏

本文详细介绍了如何借助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>