实际项目导航栏菜单切换的简单实现

124925503.png

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>url-test</title>
    <style type="text/css">
        .nav{
            background-color:pink;
            width:800px;
            height:100px;
            leight:100px;
            margin:0 auto;
        }
        .nav ul{
            list-style-type:none;
            margin:0px;
            padding:0px;
        }
        .nav ul li{
            float:left;
            height:100px;
            line-height:100px;
            width:195px;
            margin-left:4px;
        }
        .nav ul li a{
            text-decoration:none;
            background-color:#c3d9ff;
            display:block;
            text-align:center; 
        }
        .nav ul li a:hover{
            font-size:50px;
            color:red;
            background-color:white;
        }
        .nav .current{
            background-color:red;
            color:white;
            font-size:50px;
        }
    </style>
</head>
<body>
                          
    <div class="nav">
        <ul id="menu">
            <li><a href="file:///C:/Users/Administrator/Desktop/demo/billing/menu1/html.html" id="menu1">menu1</a></li>
            <li><a href="file:///C:/Users/Administrator/Desktop/demo/billing/menu2/html.html" id="menu2">menu2</a></li>
            <li><a href="file:///C:/Users/Administrator/Desktop/demo/billing/menu3/html.html" id="menu3">menu3</a></li>
            <li><a href="file:///C:/Users/Administrator/Desktop/demo/billing/menu4/html.html" id="menu4">menu4</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
                              
        $(document).ready(function(){
            var currenturl = window.location.href;
            if(currenturl.indexOf("/menu1/") != -1) {
                $(".nav").find("li").eq(0).find("a").addClass("current");
                return false;
            } else if(currenturl.indexOf("/menu2/") != -1) {
                $(".nav").find("li").eq(1).find("a").addClass("current");
                return false;
            } else if(currenturl.indexOf("/menu3/") != -1 ) {
                $(".nav").find("li").eq(2).find("a").addClass("current");
                return false;
            } else if(currenturl.indexOf("/menu4") != -1) {
                $(".nav").find("li").eq(3).find("a").addClass("current");
                return false;
            }  
        });
    </script>
</body>
</html>


demo下载:导航栏菜单切换简单实现Demo


你可能感兴趣的:(js,简单实现,导航栏菜单切换)