基于jquery导航栏

wll3241@163.com

已于 2022-02-22 14:55:01 修改

阅读量837

点赞数

分类专栏： javascript CSS3+HTML5 文章标签： jquery js css

于 2018-12-23 00:22:36 首次发布

本文链接：https://blog.csdn.net/Afreshmemory/article/details/85219761

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS3+HTML5

3 篇文章 0 订阅

订阅专栏

html

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>OA</title>
        <link rel="stylesheet" href="../Css/wm.css">
        <script type="text/javascript" src="../Js/jquery-3.3.1.min.js" ></script>
        <script type="text/javascript" src="../Js/wm.js"></script>
    </head>
    <body>
        <div class="wmhead">
            <ul class ="wmnav">
                <li class="navitem active"><a href="#">导航导航</a></li>
                <li class="navitem wlm">
                    <a href="#">导航导航</a>
                    <ul class="wlmnav">
                        <li class="navitem"><a href="#">导航导航2</a></li>
                        <li class="navitem"><a href="#">导航导航2</a></li>
                        <li class="navitem"><a href="#">导航导航2</a></li>
                    </ul>
                </li>
                <li class="navitem"><a href="#">导航导航</a></li>
                <li class="navitem"><a href="#">导航导航</a></li>
                <li class="navitem"><a href="#">导航导航</a></li>
                <li class="navitem"><a href="#">导航导航</a></li>
            </ul>
        </div>
        <div class="wmbody"></div>
        <div class="wmtail"></div>
    </body>
    </html>

css

*{ margin: 0; padding: 0; list-style-type: none; text-decoration: none;}
.wmnav{
    background:#f2f7f8;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 2px  solid #040404;
}
.wmnav .navitem{
    position: relative;
    float: left;
    background:#e8e8e8;
    width: 120px;
   
}
.wmnav .active{
    background: #d2eef7  !important;
}
.wmnav .navitem:nth-child(odd){
    background: #f1f1f1;
}
.navitem a:hover{
    background:#d2eef7;
    cursor: pointer;
}
.wmnav .navitem a{
    display: block;
}
.wlmnav{
    display: none;
    position: absolute;
    top: 42px;
    background: #f1f1f1;
    width: 120px;
    line-height: 40px;
}
.wlmnav .navitem:nth-child(odd){
   background:#d8d7d7;;
}

$(function () {
    //一级导航点击事件
    $(".navitem > a").click(function () {
        $(".wmnav .navitem").removeClass("active");
        $(this).parent().addClass("active");
        var wlmnav = $(this).parents(".wlmnav");
        if(wlmnav)
           wlmnav.parent().addClass("active");
    });
    //二级导航弹出
    $(".wlm").hover(function(){ 
        $(this).children("a").eq(0).next().show();
    },function(){
        $(this).children("a").eq(0).next().hide();
    });
});