jquery实现导航栏切换

最新推荐文章于 2022-10-06 09:40:29 发布

weylan_shi

最新推荐文章于 2022-10-06 09:40:29 发布

阅读量5.2k

点赞数 1

分类专栏：前端文章标签： jquery 导航

本文链接：https://blog.csdn.net/qq_35554898/article/details/54895121

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<div class="menu-1-right" id="menu-1-right">
    <div class="menu-1-right-li">
        <a href="#" id="sy">首页</a>          
    </div>
    <div class="menu-1-right-li item-current">
        <a href="#" id="mpmq">企业电商</a>
        <img src="../images/dh_dbtb.png" class="dh_dbtb"/>
    </div>
        <div class="menu-1-right-li">
        <a href="#" id="qysq">产业商圈</a>
        <img src="../images/dh_dbtb.png" class="dh_dbtb"/>
    </div > 
</div > 

<div class="menus" id="menus">
            <div class="menus_div">
            <div class="slide-box">
                <div class="ej_menus" id="con_one_1">
                    <ul style="padding-right:60px">
                    <li class=""><a href="#" style="padding:12px">企业电商首页</a></li>
                    <li class=""><a href="#1F" style="padding:12px">生产厂家</a></li>
                    <li class=""><a href="#2F" style="padding:12px">经销商</a></li>
                    <li class=""><a href="#3F" style="padding:12px">快消品企业</a></li>
                    <li class=""><a href="#4F" style="padding:12px">店铺认领</a></li>
                    </ul>
                </div>
                <div class="ej_menus" id="con_one_2" style="display: none;">
                    <ul style="padding-right:60px">
                    <li class=""><a href="#" style="padding:12px">产业商圈首页</a></li>
                    <li class=""><a href="#1F" style="padding:12px">找企业</a></li>
                    <li class=""><a href="#2F" style="padding:12px">商圈一览</a></li>
                    <li class=""><a href="#3F" style="padding:12px">其他商圈</a></li>
                    </ul>
                </div>
                </div>

<script>
    $(function(){//核心实现二级菜单切换
        $("#menu-1-right div").hover(function(){
            var _index=$(this).index()-1;
            $("#menus .ej_menus").eq(_index).show().siblings().hide();
        })
    })

</script>