Question

我的网站使用样式化的<ul>列表进行简单导航，并突出显示当前页面的链接。目前，我这样做是为了给<a>对象一个这样的CSS类：

<ul class="bd-nav">
    <li><a href="index.html" class="bd-nav-active">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

使用相应的CSS：

.bd-nav-active {
    background-color: #563a64;
}

这完美无缺。但是，我想用PHP构建网站，并为标题/导航创建一个单独的文件，然后在每个其他页面上只有<?php include ?>该文件。

是否有办法动态设置导航链接的类别，具体取决于您所在的页面？这里最好的方法是什么？

经过一番摆弄解决了！我只是将class属性放入这样的变量中:(确保转义引号！）

<?php
    $nav_active = "class=\"bd-nav-active\""
?>

然后在我的导航中使用该变量：

<ul class="bd-nav">
    <li><a href="index.html" <?php if ($pid == 1) echo $nav_active; ?>>Home</a></li>
    <li><a href="contact.html" <?php if ($pid == 2) echo $nav_active; ?>>Contact</a></li>
</ul>

然后在各自的页面上，我只需设置$ pid变量：

<?php $pid = 1; ?>

完美的作品！谢谢你的回答！

@ Arrabidas92有一个很好的方法来通过获取页面URL来自动执行此操作，但我认为我会这样做，以便更好地控制导航的外观。

Answer 1

需要动态生成菜单，并且每个页面都需要在页面顶部有唯一的ID或其他内容。动态生成菜单时，如果生成的菜单项与当前页面相同，则插入和if子句将回显活动类。

Answer 2

我已经有一段时间没有在php中编码了，但是我用它来做这样的事情，在每个页面中都给出了一个独特的文件名。例如，在主页中：

<?php
   $file_name = "index.php";
?>

然后在包含的文件中应用这样的逻辑：

<?php
  if($file_name == "index.php"){
  //Your navigation for the home page
  }
  else if($file_name == "about.php"){
  //Your navigation for the about page
  }
?>

Answer 3

好的，我会给你一些提示。首先，要了解您网站的页面，您可以在PHP中使用一个名为$SERVER的超全局，具有以下属性：$_SERVER['REQUEST_URI']。

通过调用它，PHP将在domain.com之后返回url的部分内容。例如，如果当前网址是domain.com/home，则echo将仅返回“/ home”。

然后，您可以放置关于突出显示链接的逻辑：

if($_SERVER['REQUEST_URI' == '/home') {
   //Add active class to the link HOME
}...

Answer 4

你可以尝试这个，但这是一个Jquery，只需将CDN放入你的文件中。

$(document).ready(function(){

    if(window.location.href === "index.php") {
        $(".bd-nav").addClass("active-bgRed");
    }
    else if(window.location.href === "about.php") {
         $(".bd-nav").addClass("active-bgBlue");
    }
    else if(window.location.href === "contact.php") {
         $(".bd-nav").addClass("active-bgGreen");
    }

});

// CSS
.active-bgRed{
    background-color: red;
}

.active-bgBlue{
    background-color: blue;
}

.active-bgGreen{
    background-color: green;
}

// JQuery CDN
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

动态CSS类

4 个答案: