如果我想在 menu.php 的导航菜单中标记为活动页面

Question

我使用 'include' php 来分隔我网站的标题。 所以，如果我需要更改标题中的导航菜单部分，我可以轻松解决，而不是每个修复超过 20 页。

我的问题是我喜欢在导航按钮中添加一个“当前”类。 例如，如果我在“主页”页面，那么我想将“主页”按钮的字体颜色更改为红色。 如果我移动到“联系”页面，我希望将“联系”按钮更改为红色，并希望“主页”按钮变为正常颜色。

由于所有导航按钮代码都在 header.html 中。 如何添加“当前”类，以便用户知道他们正在查看哪个页面？

提前致谢。

Answer 1

我无法发表评论，因为我没有 50 个代表，但我做了一些研究并找到了这个链接 How to have the class=“selected” depending on what the current page/url is。 $_SERVER['REQUEST_URI'] 是本示例中使用的方法。因此，如果您需要进一步澄清，您也可以查找。 编辑：这个例子不需要 JQuery。 或者你可以试试这个：

   <div class="menu">
        <div id="whatever" class="whatever">
            <ul>
                <li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="current" <?php } ?>>Home</a></li>
                <li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="current" <?php } ?>>About</a> </li>
            </ul>
         </div>
    </div>

Answer 2

这是一个非常基本且不安全的示例，希望您能理解。

首先找出你在哪个页面，也许你有一个叫做 page 的 URL 参数，你称之为 index.php?page=home 或 index.php?page=contact。

<?php $page=$_REQUEST['page']; ?>

然后编写你的 HTML：

<a href="index.php?page=home">Home</a><br>
<a href="index.php?page=contact">Contact</a>

现在将类检查添加到您的链接中：

<a href="index.php?page=home" class="<?=($page=='home'?'current':'');?>">Home</a><br>
<a href="index.php?page=contact" class="<?=($page=='contact'?'current':'');?>">Contact</a>

（这使用了花哨的内联 IF 语句，只是因为它们非常符合目的。如果您还不了解它们，我建议您阅读它们。）

如果您的 $page 变量设置为“home”，这将生成 HTML 源代码，如下所示：

<a href="index.php?page=home" class="current">Home</a><br>
<a href="index.php?page=contact" class="">Contact</a>

您还可以将整个类分配包含在 PHP 检查中：

<a href="index.php?page=home"<?=($page=='home'?' class="current"':'');?>>Home</a><br>
<a href="index.php?page=contact"<?=($page=='contact'?' class="current"':'');?>>Contact</a>

这会生成这样的 HTML 源代码：

<a href="index.php?page=home" class="current">Home</a><br>
<a href="index.php?page=contact">Contact</a>

最实用的方法是非常简单地创建一个小函数来为您生成所有内容，例如这个：

<?php
    function makeNavLink($pageName){
        global $page;
        $link='<a href="index.php?page='.$pageName.'"';
        $link.=($page==$pageName?' class="current"':'').'>';
        $link.=ucwords($pageName).'</a>';
        return $link;
    }
?>

这将允许您像这样调用页面中的函数：

<?=makeNavLink("home");?><br>
<?=makeNavLink("contact");?>

如果您的页面是“联系人”，它也会使 HTML 输出看起来像这样：

<a href="index.php?page=home">Home</a><br>
<a href="index.php?page=contact" class="current">Contact</a>

Answer 3

如果你使用的是php，那么你可以这样设置。

1) 给每个链接上课

<li class="home"><a href="home.php">Home</a></li>
<li class="about"><a href="about.php">About</a></li>
<li class="contact"><a href="contact.php">About</a></li>

注意：文件名和类名相同（如果文件名是 home.php，那么这个菜单的类是“home”）

2) 在 header.php 中使用此代码。

<?php
$class = basename($_SERVER['REQUEST_URI'], '.php?' . $_SERVER['QUERY_STRING']);
/* This basename function returns filename from url. For example if url is http://www.example.com/home.php?id=15, then this will return "home" only. */
?>
<script type="text/javascript" src="jquery.min.js"> <!-- Link your jquery library -->

<script type="text/javascript">
$(document).ready(function(){
   $(".<?php echo $class; ?>").addClass('current');
});
</script>