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

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

weixin_30747253

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

阅读量373

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jhcelue/p/6773926.html

版权

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

转载于:https://www.cnblogs.com/jhcelue/p/6773926.html

weixin_30747253

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用jquery制作一个简单的导航栏

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习导航栏的制作</title> <script src="http://code.jquery.com/jquery-1.10.2.js...
复制链接

扫一扫