zoukankan      html  css  js  c++  java
  • 一个简单的导航菜单切换显示

    一直都在用导航栏菜单选项的切换,使用js,jquery实现过相应的代码。下面展示一下用js实现切换:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style type="text/css">
        #container{width: 1100px;margin: 0 auto;}
        header{display:block;width: 100%;height: 90px;position: relative;}
        #logo{margin-top: 30px;float: left;}
        nav{display: block;float: right;margin-top: 37px;}
        nav ul li{list-style: none;float: left;margin-left: 45px;}
        nav ul li a{text-decoration: none;color: #5e5d5d;font-size: 14px;}
        .selected,header ul li a:hover{color: #ff4242;}
        </style>
    </head>
    <body>
    <!--the header Section  -->
            <header >
                <div id="container">    
                    <!--Logo-->
                    <a href="#" id="logo">
                    </a>
                    
                    <!--Navigation Menu -->
                    <nav>
                        <ul>
                            <li><a href="#" class="selected">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Team</a></li>
                            <li><a href="#">Journal</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </nav>
                    
                </div>
            </header>
            <script src="../js/jquery.js"></script>
            <script type="text/javascript">
            $("nav ul li a").click(function() {
                if(!$(this).hasClass('selected')){
                    $(this).addClass('selected');
                }    
                $(this).parent('li').siblings('li').find('a').removeClass('selected');
            });
            </script>
        
    </body>
    </html>

    将其中jquery的路径换为本地的JQuery文件路径即可,效果如下:

  • 相关阅读:
    Net Core -- 配置Kestrel端口
    NET Core迁移
    NET Core 2.0 微服务跨平台实践
    NET Core 与 Vue.js 服务端渲染
    Varnish 实战
    Hitchhiker 是一款开源的 Restful Api 测试工具
    ABP框架用Dapper实现通过SQL访问数据库
    开源框架总体介绍
    Net Core API网关Ocelot
    Jquery autocomplete插件
  • 原文地址:https://www.cnblogs.com/zsblogs/p/4982975.html
Copyright © 2011-2022 走看看