用jquery制作一个简单的导航栏

来源：互联网发布：java html标签转pdf 编辑：程序博客网时间：2024/06/05 18:12
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>学习导航栏的制作</title>        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>        <script>            $(document).ready(function() {                $(".li1").click(function() {                    $(this).next().addClass("dlHover");//取得其下一个兄弟元素                });                $(".ul1").hover(function() {//第一个函数作为鼠标悬浮时执行的函数                    $(this).children(".li1").addClass("bg");//取得子元素中class="li1"的元素                }, function() {//第二个函数作为鼠标离开时执行的函数                    $(this).children(".li1").removeClass("bg");                    $(this).children(".li2").removeClass("dlHover");                });            });        </script>        <style>            *{margin: 0px;padding: 0px;text-align: center;}            ul li{list-style: none;}            .nav_div{height: 20px;}            .li2{display:none;width: 100px;border: 1px solid gray;background: #00FFFF;}            .dlHover{position:absolute;z-index: 9999;display: block;}            .ul1{border: 1px solid gray;width: 100px;background-color: #999999;}            .bg{background-color: #1F9999;}            dl,dt,dd{border: 1px solid gray;width: 200px;}            .ul1{float: left;}        </style>    </head>    <body>        <div class="nav_div">            <!-- 导航开始 -->            <ul class="ul1">                <li class="li1">导航1</li>                <li class="li2">                    <ul>                        <li><a href="#">二级菜单1</a><li>                        <li><a href="#">二级菜单1</a></li>                    </ul>                </li>            </ul>            <ul class="ul1">                <li class="li1">导航2</li>                <li class="li2">                    <ul>                        <li><a href="#">二级菜单2</a><li>                        <li><a href="#">二级菜单2</a></li>                    </ul>                </li>            </ul>            <ul class="ul1">                <li class="li1">导航3</li>                <li class="li2">                    <ul>                        <li><a href="#">二级菜单3</a><li>                        <li><a href="#">二级菜单3</a></li>                    </ul>                </li>            </ul>        </div>        <!-- 导航开始 -->        <div>            <dl style="border: 1px solid gray;">                <dt>学习导航栏的制作</dt>                <dd>这是一个简单的导航栏</dd>                <dd>这是一个简单的导航栏</dd>                <dd>这是一个简单的导航栏</dd>            </dl>        </div>    </body></html>
0 0