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

一直都在用导航栏菜单选项的切换，使用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文件路径即可，效果如下：

 

 

posted @ 2015-11-21 10:03  珊瑚月  阅读(492)  评论(0)  编辑  收藏  举报