【问题标题】: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 并检查输出。

【讨论】:

    猜你喜欢
    • 2016-01-24
    • 1970-01-01
    • 1970-01-01
    • 2011-10-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-28
    • 1970-01-01
    相关资源
    最近更新 更多