Question

我有一个网站（www.mhk.me）。在此站点（html）导航栏焦点是页面更改时更改。但现在我要做一个这个网站的后端（在PHP上转换）。我创建了一个文件名（Navigation.php）然后我包含了所有文件。问题是在php网站中，当我更改页面时，焦点始终在HOME上而不是更改为其他导航。

<div class="navbar-collapse nav-main-collapse collapse">
    <div class="container">

        <nav class="nav-main mega-menu">
            <ul class="nav nav-pills nav-main" id="mainMenu">
                <li class="active">
                    <a class="dropdown-toggle" href="index.html">
                        Home
                    </a>

                </li>
                <li>
                    <a class="dropdown-toggle" href="about.html">
                        About Me
                    </a>
                </li>
                <li>
                    <a class="dropdown-toggle" href="services.html">
                        Services
                    </a>
                </li>

                <li>
                    <a class="dropdown-toggle" href="portfolio.html">
                        Portfolio
                    </a>
                </li>
                <li>
                    <a class="dropdown-toggle" href="http://demo.mhk.me">
                        My Templates
                    </a>
                </li>
                <li>
                    <a class="dropdown-toggle" href="contact.html">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

Answer 1

您需要一个可以比较网址的脚本，以便您可以将.active类分配给菜单。

               $(function() {
                     var pgurl = window.location.href.substr(window.location.href
                .lastIndexOf("/")+1);
                     $(".nav-main li a").each(function(){
                          if($(this).attr("href") == pgurl || $(this).attr("href") == '' ){
                          $(this).parent().addClass("active");}
                            if($(this).attr("href") == 'index.php' && pgurl == '' ) {
                            $(this).parent().addClass("active");
                            }
                     })                      
                });

Answer 2

Math3w，您的代码需要略微更改。

$(function () {
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    $(".nav-main li a").each(function () {
        if ($(this).attr("href") == pgurl) {
            $(this).parent().addClass("active");
        }
        if ((($(this).attr("href") == 'index.php')||($(this).attr("href") == '')) && (pgurl == '')) {
            $(this).parent().addClass("active");
        }
    })
});

Answer 3

<html>
<head>
    <style>ul{
    list-style:none;
}
li{
    cursor:pointer;
    float:left;
    padding:10px;
    background-color:grey;
    border-radius:5px;
    margin:10px;
}
ul>.active{
    background-color:green;
}
</style>
</head>
<body><nav>
    <ul class="nav-main">
        <li><a href="">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function () {
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    $(".nav-main li a").each(function () {
        if ($(this).attr("href") == pgurl) {
            $(this).parent().addClass("active");
        }
        if ((($(this).attr("href") == 'index.php')||($(this).attr("href") == '')) && (pgurl == '')) {
            $(this).parent().addClass("active");
        }
    })
});
</script>
</body>
</html>

将上述代码保存为index.php或about.php或contact.php并检查输出。

导航栏，包含所有文件

3 个答案: