在 PHP 中突出显示当前页面
Posted
技术标签:
【中文标题】在 PHP 中突出显示当前页面【英文标题】:Highlight current page in PHP 【发布时间】:2022-01-05 02:12:31 【问题描述】:所以,我正在开发一个网站,我正在使用 php 模板来做这件事。 我找到了很多关于这个的教程,但没有一个提到 PHP 模板。 这是我的导航模板:
</script>
<!--Main Navigation-->
<header>
<!-- Sidebar -->
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-dark">
<div class="position-sticky">
<div class="list-group list-group-flush mx-3 mt-4">
<a
href="index.php"
class="list-group-item list-group-item-action py-2 ripple bg-button"
aria-current="true"
>
<i class="fas fa-address-card fa-fw me-3"></i><span>About us</span></a
>
<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button">
<i class="fas fa-users fa-fw me-3"></i><span>Our team</span></a
>
<a href="positions.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-laptop-code fa-fw me-3"></i><span>Open positions</span></a
>
<a href="associates.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-handshake fa-fw me-3"></i><span>Associates</span></a
>
<a href="commissions.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-coins fa-fw me-3"></i><span>Commissions</span></a
>
<a href="pingernos.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-server fa-fw me-3"></i><span>Pingernos</span></a
>
<a href="network.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item-head"
><i class="fas fa-network-wired fa-fw me-3"></i><span>Network</span><i class="fas fa-sort-down"></i></a
>
<a href="badwolf.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
<i class="fas fa-paw fa-fw me-3"></i><span>Bad Wolf</span></a
>
<a href="mg.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
<i class="fas fa-cubes fa-fw me-3"></i><span>MinecraftGolden</span></a
>
<a href="cabin.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
<i class="fas fa-heartbeat fa-fw me-3"></i><span>The Cabin</span></a
>
<a href="haven.php" class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item">
<i class="fas fa-code fa-fw me-3"></i><span>The Haven</span></a
>
<a href="credit.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-award fa-fw me-3"></i><span>Credit</span></a
>
<a href="legal.php" class="list-group-item list-group-item-action py-2 ripple bg-button"
><i class="fas fa-balance-scale fa-fw me-3"></i><span>Legal</span></a
>
<!--
<a href="#" class="list-group-item list-group-item-action py-2 ripple"
><i class="fas fa-money-bill fa-fw me-3"></i><span>Sales</span></a
> -->
</div>
</div>
</nav>
<!-- Sidebar -->
<!-- Navbar -->
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-toggle="collapse"
data-mdb-target="#sidebarMenu"
data-target="#collapseOne"
aria-controls="sidebarMenu"
aria-expanded="true"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> -->
<!-- Brand -->
<a class="navbar-brand" href="index.php">
<img
src="assets/PsychOpsTransparent.png"
class="navbar-ps"
loading="lazy"
/>
</a>
<!-- Right links -->
<ul class="navbar-nav ms-auto d-flex flex-row">
<!-- Icon -->
<li class="nav-item me-3 me-lg-0">
<a class="nav-link" href="https://github.com/PsychOps" target="_blank">
<i class="fab fa-github bg-button fa-2x" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
<!-- Navbar -->
</header>
<!--Main Navigation-->
<!--Main layout-->
<main style="margin-top: 58px;">
<div class="container pt-4"></div>
</main>
<!--Main layout-->
如何突出显示当前页面? 如果有人知道怎么做,请回复,非常感谢任何建议。
【问题讨论】:
那些教程在什么方面没有起作用?我不明白为什么使用模板会改变它的基础。究竟应该如何做取决于您使用的模板引擎(它们并非都是平等的) 【参考方案1】:使用$_SERVER
的REQUEST_URI
或SCRIPT_NAME
键获取当前URL、文件并检查它是否与您的链接匹配。
选项1:完全匹配。
首先获取当前 URL,文件名。将此代码放在您的菜单之前。
<?php
$thisFile = (isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : (isset($_SERVER['SCRIPT_NAME']) ? $_SERVER['SCRIPT_NAME'] : null));
$thisFile = pathinfo($thisFile, PATHINFO_BASENAME);
// $thisFile maybe xxx.php one of your file or URL.
?>
接下来检查您的链接。这个例子将使用 team.php,检查当前 URL。
<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if (stripos($thisFile, 'team.php') !== false) echo ' current-menu active'; ?>">
上面的代码将检查当前 URL 是否包含 team.php。如果为真,则将添加 current-menu
和 active
类。
选项2:精确匹配并匹配子目录中的文件。
如果您的菜单有 2 个使用相同文件名的项目。示例 team.php 和 support/team.php 然后使用下面的代码。
<?php
$thisUrl = (isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : (isset($_SERVER['SCRIPT_NAME']) ? $_SERVER['SCRIPT_NAME'] : null));
$thisFile = pathinfo($thisUrl , PATHINFO_BASENAME);
?>
<!-- exact match file.php -->
<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if ('team.php' === $thisFile)) echo ' current-menu active'; ?>">...</a>
<!-- match /path/file.php -->
<a href="support/team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if (stripos($thisUrl, 'support/team.php') !== false) echo ' current-menu active'; ?>">...</a>
对于这两个选项,您可以只选择一个 CSS 类作为当前活动的菜单项(current-menu
、active
)或使用您自己的。
添加支持的 CSS。
这只是关于 CSS 的。要使您的样式处于活动/当前状态,您必须为它们创建 CSS。 示例:
.current-menu
border-left: 5px solid #blue;
See it in action
【讨论】:
好吧,为了让一切正确,我必须将第一个代码放在 navigation.php 的顶部,然后在导航栏中的锚标记中添加该 php 脚本?那应该这样做吗?因此,如果我然后在 css 中编辑您制作的那些类(当前菜单和活动),它应该可以工作吗?对不起,如果我问了很多,但我只是不习惯 php。 在a
标签内添加 PHP 之前,您可以只选择一个 CSS 类。在我的示例中,我使用了 2 个类(current-menu
和 active
),如果你不使用 Bootstrap 之类的东西,你可以选择任何你想要的东西。并确保在每个a
中正确编辑if
条件。然后在文件中创建新的 CSS,例如 .current-menu background-color: orange; color: white;
来设置当前活动链接的样式。
好的,虽然我不确定如何处理您发送的第一个代码。
检测当前 URL 并仅获取文件名,例如 xxx.php。
是的,但是,我是就这样保留它还是我必须编辑一些东西?以上是关于在 PHP 中突出显示当前页面的主要内容,如果未能解决你的问题,请参考以下文章