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


If I want to mark as active page in the navigation menu in menu.php

我使用'include' php来分隔我的网站的标题。因此,如果我需要更改标题中的导航菜单部分,我可以轻松修复,而不是每个页面修复 20 多页。

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

由于所有导航按钮代码都在标题中.html。如何添加类"当前",以便用户可以知道他们正在查看哪个页面?

提前谢谢。

如果你使用的是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>

注意:给文件名和类名相同(如果文件名是主页.php那么这个菜单的类是"home")

2) 在标题中.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>

这是一个非常基本且不安全的示例,只是为了希望您了解这个想法。

首先找出你在哪个页面上,也许你有一个名为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>

我无法发表评论,因为我没有 50 次代表,但我做了一些研究并找到了这个链接 如何让类="选定" 取决于当前页面/网址是什么。 $_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>