导航栏，包含所有文件答案

【问题标题】：Navigation bar, include with all file导航栏，包含所有文件
【发布时间】：2015-03-18 08:17:55
【问题描述】：

我有一个网站 (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>

【问题讨论】：

你的页脚有类似的页面吗？像footer.php这样的东西？

标签： javascript php html css

【解决方案1】：

您将需要一个可以比较 url 的脚本，以便您可以将 .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");
                            }
                     })                      
                });

【讨论】：

能否向我提供您已应用脚本的链接？
给我发邮件 info@mhk.me 我会给你完整的脚本。
是的，我在 Navigation.php 中包含了 Jquery.js。
@MuhammadHamZaKhan，我需要查看包含脚本的开发页面。你是否有一个？例如。 mhk.me/index.php 或 mhk.me/about.php
是的，我有所有文件。发邮件给我，我给你所有的文件。那你就可以轻松查了，因为我是JAVASCRIPT初学者。

【解决方案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");
        }
    })
});

【讨论】：

仍然无法工作 :( 就像我房间的空调一样。我现在要爆炸了。
@avnaveen，你可能有这个想法，但通常，Home 菜单总是与 index.php 或 '/' 链接，当然你可能还需要在第二个 .attr 中添加 '/' （“href”）。不错的建议。 =)
if($(this).attr("href") == pgurl || $(this).attr("href") == ' ' ) 如果我们使用这个，带有 href=' ' 和带有 href = pgurl 值的处于活动状态。

【解决方案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 并检查输出。

【讨论】：