在导航栏上突出显示默认页面当前菜单答案

【问题标题】：highlighting default page current menu on a navigation bar在导航栏上突出显示默认页面当前菜单
【发布时间】：2013-07-06 15:02:30
【问题描述】：

我没有成功突出显示我的默认网页，例如：www.mydomain.com。当它被重定向到 index.php 和其他菜单链接时，它很好，当它是没有其他文件的普通域时，我不能。我写了以下 Jquery 只是为了放大链接的字体大小并将其变为白色：

$(function () {
            var path = window.location.href;
            path = decodeURIComponent(path);
            path =path.substr(path.lastIndexOf("/") +1);

            $('#menu a').each(function () { 
                var href = $(this).attr('href');
                href=href.substr(href.lastIndexOf("/") +1);
                if (href.indexOf(path) != -1 && path != "") {
                    $(this).closest('li').find('a').css({'color': 'white' , 'font-size' : '18px' });
                        }
               }); //end of each function
            });

HTML 标记是：

  <div id="menu">
            <ul>
            <li><a href="$doc_root/index.php" title="Home Page">Home</a></li>
            <li><a href="$doc_root/travel/grid.php" title="My Trips">travelling</a></li>
            <li><a href="#">images</a></li>
            <li><a href="#">words</a></li>
            <li><a href="#">about</a></li>
            </ul>
    </div>

当只写域名（www.mydomain.com）时，如何将我的第一个链接菜单“主页”更改为新字体和颜色？我希望它像 index.php 被选中一样突出显示。非常感谢。米附：不管将域名直接重定向到 index.php（我一般都知道怎么做，我不知道如何用 Aruba 来做），不过我正在寻找一个不错的“编程”解决方案。

【问题讨论】：

标签： jquery css menu navbar

【解决方案1】：

在每个页面上，使用该页面名称在 PHP 中设置一个变量，因此对于 index.php，设置一个值为“home”的变量。对每个单独的菜单项执行此操作。然后在每个页面加载检查此变量名称并将一个类添加到相关菜单项。像这样的：

 <?php
$menuItems = array(
    'Home' => array('text' => 'Home', 'url' => '/'),
    'Page1' => array('text' => 'Page 1','url' => '/page-1'),
    'Page2' => array('text' => 'Page 2', 'url' => '/page-2'),
    'Page3' => array('text' => 'Page 3', 'url' => '/page-3'),
    'Page4' => array('text' => 'Page 4', 'url' => '/page-4'),
);
?>
<div id="nav">
    <ul>
    <?php
    $miCounter = 1;
    foreach($menuItems as $key => $value):
        $currentLink = '';
            if($pageName === $key):
                $currentLink = 'class="selected"';
            endif;
        ?>
        <li>
            <a <?php echo $currentLink; ?> href="<?php echo $value['url']; ?>">
                <?php echo $value['text']; ?>
            </a>
        </li>
        <?php
    endforeach;
    ?>
    </ul>
</div>

因此，当您的当前页面为“主页”($pageName) 时，它会将class="selected" 添加到菜单链接中。然后在你的 CSS 中为 selected 类创建你需要的任何背景或颜色样式。

【讨论】：

好吧，阿德里安，我相信你对 $value['class'] 的看法是错误的，或者至少我是这么认为的，我的问题没有解决。
Thks Adrian，你知道用一些 php 代码从域重定向到 domain/index.php 的方法吗？我的意思是，我无法编辑 Apache 服务器文件，因为我的网站托管在某些不允许我编辑此类配置的服务提供商上。谢谢 M. P.S.我相信你错了 $value['class']
你的意思是当你去www.domain.com（例子）它不会自动调用www.domain.com/index.php
完全正确。如果我输入 www.domain.com，它会显示与 index.php 相同的内容，但 URL 不会重定向到 index.php。
它正在调用 index.php，如果您没有将 url 显式设置为 index.php，这是服务器的默认调用。我不明白你为什么需要这样做。如果你真的需要，你真正能做的就是将所有内部链接hrefs 设置为"/index.php" 而不是"/"，但这并没有什么区别。 index.php 无论如何都会被调用。哦，您对$value['class'] 的看法是正确的。我使用了一些已经编写的代码，在清理它时，我忘了删除那个位。好地方！

【解决方案2】：

我想您应该能够将您的 Home 链接更改为 /，因为 index.php [通常] 是默认文档索引名称，可以省略。

另外，考虑到您的示例，我认为使用window.location.pathname 而不是window.location.href 会更方便。

#menu a.curpage {
    color: white;
    font-size: 18px;
}

$('#menu a').each(function() {
    if (this.href == window.location.pathname) {
        $(this).addClass('curpage');
    }
});

如果在给定示例中菜单只有五个项目，您可以完全避免使用 JS，请参阅本主题中的答案：Active Menu Highlight CSS

【讨论】：

好的，可以替代以前更长的JS，但我仍然无法解决我的域问题。当它是 www.example.com 时，我无法使其具有与 www.example.com/index.php 相同的样式。 :-(

【解决方案3】：

很抱歉碰到了一个老话题，但我刚刚遇到了同样的问题，我找到了解决方案。

$(document).ready(function() {
    $("#menu [href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active"); <-- INSERT NAME OF YOUR CLASS
        }
        if(window.location.href == "http://YOUR-DOMAIN.??/") {
            $(window.location.href = "http://YOUR-DOMAIN.??/index.php");
            $(this).addClass("active"); <-- INSERT NAME OF YOUR CLASS
        }
    });
});

它将从http://your-domain.com/ 重定向到http://your-domain.com/index.php 并设置“active-class”。

【讨论】：