导航栏-如果URL处于活动状态，则突出显示背景

Question

感谢您花时间来看这篇文章。

我们在magento上有一个标准的导航栏，我已经成功地复制了它（通过复制和编辑html/css的部分），并将其放在原始导航栏下面，所以我们实际上有2个。

原始导航栏通过magento代码工作，并识别类别URL是否处于活动状态，则该类别的导航栏将以红色突出显示。

我现在想尝试和复制这一点，任何帮助都将不胜感激。我在当地做这件事，所以很遗憾不能提供网站链接。

HTML:

 <div class="nav-container2">
    <ul id="nav2">
        <li class="downloads"><a href="http://127.0.0.1/foscamsite/downloads" id="Downloads"><span>Downloads</span></a></li>
        <li class="forum"><a href="http://127.0.0.1/foscamsite/forum" id="Forum"><span>Forum</span></a></li>
</ul></div>

CSS：

.nav-container2 { width:940px; margin:auto; height:30px;}
    #nav2 { width:547px; height:40px; float:right; margin:1px 0 0 0; font-size:105%; background:url(../images/bg-nav.png) 0 0 repeat-x; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0 0 3px #ccc; }
    #nav2 li { position:relative; text-align:left; }
    #nav2 li.over { z-index:998; }
    #nav2 a,
    #nav2 a:hover { display:block; line-height:1.3em; text-decoration:none; }
    #nav2 span { display:block; cursor:pointer; white-space:nowrap; }
    #nav2 li ul span {white-space:normal; }
    #nav2 ul li.parent a { background:url(../images/bkg_nav2.gif) 100% 100% no-repeat; }
    #nav2 ul li.parent li a { background-image:none; }
    #nav2 li { float:left; margin:0 1px 0 0; }
    #nav2 li.active a { background:url(../images/bg-nav-hover.png) 0 0 repeat-x; color:#fff; }
    #nav2 a { float:left; padding:12px 14px 11px; color:#787878; font-size:105%;  }
    #nav2 li.over a,
    #nav2 a:hover { background:url(../images/bg-nav-hover.png) 0 0 repeat-x; color:#fff; }

有一种感觉，有些CSS是不需要的，只是不需要从哪里开始修改它

非常感谢！

Answer 1

试试这个。注意，我已经删除了服务器地址&使URL相对，因此希望它将使迁移到实时服务器更简单：

<?php
echo "<div class="nav-container2">n";
echo "<ul id="nav2">n";
echo "<li class="downloads";
if ($_SERVER['REQUEST_URI'] == "/foscamsite/downloads") echo " active";
echo ""><a href="/foscamsite/downloads" id="Downloads"><span>Downloads</span></a></li>n";
echo "<li class="forum";
if ($_SERVER['REQUEST_URI'] == "/foscamsite/forum") echo " active";
echo ""><a href="/foscamsite/forum" id="Forum"><span>Forum</span></a></li>n";
echo "</ul>n";
echo "</div>n";
?>

Answer 2

如果在标题上方添加php变量并将其用于导航中的活动状态，这可能会更容易。

例如：

<?php $page = $_SERVER['REQUEST_URI']; ?>
<div class="nav-container2">
<ul id="nav2">
    <li <?php if ($page == 'downloads.php') { ?>class="active"<?php } ?>><a href="downloads.php" id="Downloads">     <span>Downloads</span></a></li>
<li <?php if ($page == 'forum.php') { ?>class="active"<?php } ?>><a href="forum.php" id="Forum"><span>Forum</span></a></li>

希望这能帮助