用JQuery做导航栏

最新推荐文章于 2023-07-02 21:55:07 发布

Lee幻影

最新推荐文章于 2023-07-02 21:55:07 发布

阅读量1.9k

点赞数 3

分类专栏： H5 文章标签： css h5 jquery javascript

本文链接：https://blog.csdn.net/a443512430/article/details/73473030

版权

H5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用JQuery做导航栏，当鼠标放到字上去时，导航栏会变颜色

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>团购网主导航</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            font-family: Arial, "微软雅黑", "宋体";
            font-size: 14px;
        }

        nav{
            height: 40px;
            width: 800px;
            margin: 10px auto;
            background-color: #8cc6ce;
        }

        nav ul{
            width: 100%;
            height: 40px;
            overflow: hidden;
        }

        nav ul li{
            width: 100px;
            height: 40px;
            float: left;
            list-style-type: none;
            text-align: center;
            line-height: 40px;
        }

        nav ul li a{
            font-size: 18px;
            color: white;
            text-decoration: none;
            display: block;
        }

        .heightlight{
            background-color: #0038ce;
        }

    </style>
    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
     $(function(){
         $("li").mouseover(function(){
             $(this).addClass("heightlight");
         }).mouseout(function(){
             $(this).removeClass("heightlight");
         });
     });
    </script>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">身边团购</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">电影</a></li>
        <li><a href="#">KTV</a></li>
        <li><a href="#">酒店</a></li>
        <li><a href="#">购物</a></li>
    </ul>
</nav>
</body>
</html>