带有导航栏更改颜色的通用头文件答案

【问题标题】：Common header file with navbar change color带有导航栏更改颜色的通用头文件
【发布时间】：2019-04-16 13:40:24
【问题描述】：

我有一个 header.php 文件包含在 index.php 和我网站的其他页面上。在我的标题选项卡中，我有一个导航栏，我想根据相应的页面使每个选项卡处于活动状态。例如（关于页面 - 关于标签颜色应该改变，对于联系 - 联系标签应该改变颜色）

【问题讨论】：

很好——你的问题是什么？你的代码在哪里？
请重读How to Ask并提供minimal reproducible example

标签： javascript php jquery html css

【解决方案1】：

我建议在顶部（加载 header.php 之前）包含文件名。然后在标题中你可以做简单的陈述，f.ex.

$page_title = '主页';

然后在 header.php 中，在导航菜单中：

<a href='#' class='someClass <?php echo $page_title === 'Home Page' ? 'active' : ''; ?>"> Home Page </a>

'active' 类将负责当前页面的样式。

【讨论】：

【解决方案2】：

您可以完全在 CSS 中完成此操作。给定以下标题 HTML：

<nav class="header">
  <ul>
    <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">Contact</a></li>
  </ul>
</nav>

然后，您可以将“home”、“about”和“contact”类分别添加到 Home、About 和 Contact 页面的 <body> 标记中。然后，您创建以下 CSS：

body.home nav li.home,
body.about nav li.about,
body.contact nav li.contact {
  background-color: red; /* or however you want to style the active tab */
}

【讨论】：