一个简单的导航菜单切换显示

最新推荐文章于 2021-01-28 13:54:38 发布

weixin_34248849

最新推荐文章于 2021-01-28 13:54:38 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zsblogs/p/4982975.html

本文介绍了一种使用纯JS实现的导航栏菜单选项切换方法，包括HTML结构搭建、CSS样式设置及JS交互逻辑编写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直都在用导航栏菜单选项的切换，使用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>