用JQuery做导航栏

来源：互联网发布：js实现下拉加载更多编辑：程序博客网时间：2024/05/21 10:04

用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>

页面显示效果：

阅读全文

1 0