英文:
How to dynamically add the "active" class to the navigation menu item based on the current page in PHP?
问题
Sure, here's the translated content you requested:
我有一个PHP脚本，它在我的inc_header.php文件中包含了导航菜单。
Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<?php include('inc_metadata.php');?>
</head>
<body>
<!--Header-->
<?php include('inc_header.php');?>
<?php
$allowed = array('about','home','gallery','videogallery','faculties','contact','admission','facilities','activity','achievements',);
$page = ( isset($_GET['page']) ) ? $_GET['page'] : 'index';
if ( in_array($page, $allowed) )
{
include("$page.php");
include('inc_config.php');
}
else {
include("home.php");
}
?>
<!--footer-->
<?php include('inc_footer.php'); ?>
<?php include('inc_bottom.php'); ?>
</body>
</html>
我想动态向与当前页面对应的
根据我的代码，导航栏是固定在'index.php'中的。
我该如何使用PHP实现这一点？我希望根据当前页面的URL动态应用"active"类。谢谢！
我尝试使用ChatGPT，但没有成功。我是一个自学的初学者，希望有人能帮助我。
英文:
I have a PHP script that includes the navigation menu in my inc_header.php file.
<header id="header" class="fixed-top">
<div class="container-fluid d-flex justify-content-between align-items-center">
<a href="index.php" class="logo">
<img src="assets/img/logo.png" alt="IHRD logo" class="img-fluid">
</a>
<h1 class="logo me-auto me-lg-0">
<a class="d-none d-lg-block" href="index.php">Technical Higher Secondary School Puthuppally</a>
<a class="d-block d-lg-none" href="index.php">THSS Puthuppally</a>
</h1>
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li>
<a href="?page=home">Home</a>
</li>
<li>
<a href="?page=about">About</a>
</li>
<li>
<a href="?page=admission">Admissions</a>
</li>
<li>
<a href="?page=faculties">Faculties</a>
</li>
<li>
<a href="?page=facilities">Facilities</a>
</li>
<li>
<a href="?page=activity">Activities</a>
</li>
<li>
<a href="?page=achievements">Achievements</a>
</li>
<li class="dropdownlist">
<button class="dropbtn">Gallery</button>
<div class="dropdownlist-content">
<a href="?page=gallery">Images</a>
<a href="?page=videogallery">Videos</a>
</div>
</li>
<li>
<a href="?page=contact">Contact</a>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
<!-- .navbar -->
<!--social links-->
</div>
</header>
Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<?php include('inc_metadata.php');?>
</head>
<body>
<!--Header-->
<?php include('inc_header.php');?>
<?php
$allowed = array('about','home','gallery','videogallery','faculties','contact','admission','facilities','activity','achievements',);
$page = ( isset($_GET['page']) ) ? $_GET['page'] : 'index';
if ( in_array($page, $allowed) )
{
include("$page.php");
include('inc_config.php');
}
else {
include("home.php");
}
?>
<!--footer-->
<?php include('inc_footer.php'); ?>
<?php include('inc_bottom.php'); ?>
</body>
</html>
I want to dynamically add the class "active" to the <li> element that corresponds to the current page. For example, if the current page is "home.php", I want the corresponding <li> element for "Home" to have the class "active" added to it.
According to my code Navbar is fixed in 'index.php'.
How can I achieve this using PHP? I want the active class to be applied dynamically based on the current page URL. Thank you!
I tried chatgpt but didn't work.
I'm a self taught beginner, I hope someone help me.
答案1
得分: 2
首先，你需要将你的 include 语句放在 GET 值测试之后。
<?php
$allowed = array('about','home','gallery','videogallery','faculties','contact','admission','facilities','activity','achievements',);
$page = ( isset($_GET['page']) ) ? $_GET['page'] : 'index';
if ( in_array($page, $allowed) ) {
// 在这里测试你要显示的页面，以便检查相应的菜单项
// $page = $_GET['page'];
include('inc_header.php');
include("$page.php");
include('inc_config.php');
} else {
include("home.php");
}
?>
在你的菜单中，按照以下方式修改你的链接：
<li><a href="?page=home" class="<?php if($page == "home") { echo "selected"; } ?>">Home</a></li>
<li><a href="?page=about" class="<?php if($page == "about") { echo "selected"; } ?>">About</a></li>
// 其中 .selected 是你要应用的 CSS 样式
英文:
First, you'll need to move your include after you test the GET value.
<?php
$allowed = array('about','home','gallery','videogallery','faculties','contact','admission','facilities','activity','achievements',);
$page = ( isset($_GET['page']) ) ? $_GET['page'] : 'index';
if ( in_array($page, $allowed) )
{
// here you test the page you'll show, so the corresponding menu item can be checked
// $page = $_GET['page'];
include('inc_header.php');
include("$page.php");
include('inc_config.php');
}
else {
include("home.php");
}
?>
in your menu, modify your links as follow:
<li><a href="?page=home" class="<?php if($page == "home") { echo"selected"; } ?>">Home</a></li>
<li><a href="?page=about" class="<?php if($page == "about") { echo"selected"; } ?>">About</a></li>
// where .selected is the CSS style you want to apply
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论