您好，我正在尝试使我的导航栏在php中处于活动状态，以便用户可以知道他们在哪个页面上。我是 php 的新手，对它了解不多。那么我如何在这段代码中添加一个class="active"来制作一个活动的导航栏，并在同一个索引.php页面中显示所有页面。
<a href="?page=home"> Home</a></br>
<a href="?page=news"> News</a></br>
<a href="?page=about"> About</a></br>
<a href="?page=contact"> Contact</a></br>
<?php
if (!isset($_GET['page'])) {
include "home.php";
} else {
switch ($_GET['page']) {
case "home":
include "home.php";
break;
case "news":
include "news.php";
break;
case "about":
include "about.php";
break;
case "contact":
include "contact.php";
break;
default:
include "home.php";
};
}
?>
创建菜单项数组，然后使用 foreach 循环动态生成菜单。
这样，当您向数组添加新项目时，它们将显示在菜单中：
<html>
<head>
<title>Website</title>
<style type="text/css" media="screen">
.active {
font-weight: bold;
}
</style>
</head>
<body>
<?php
// This is your menu
$items = array("home", "news", "about", "contact");
foreach ($items as $item)
{
if (isset($_GET['page']) && $_GET['page'] == $item)
{
echo '<a href="?page=' . $item . '" class="active"> ' . $item . '</a></br>';
$activePage = $item . ".php";
}
else
{
echo '<a href="?page=' . $item . '"> ' . $item . '</a></br>';
}
}
// Include your page
if (isset($activePage))
{
include $activePage;
}
else
{
include "home.php";
}
?>
</body>
</html>
您应该用此代码替换所有代码并试一试。使用循环来减少您需要编写的冗余标记量不仅是 DRY，而且将来会为您节省大量时间！
您可以使用
下面的PHP代码作为导航。我建议您使用无序列表（即 <ul><li><a href=""></a></li></ul> ） 标签进行导航：
<ul>
<li<?php if($_GET['page']=="home") { echo " class='"active'""; } ?>><a href="?page=home"> Home</a></li>
<li<?php if($_GET['page']=="news") { echo " class='"active'""; } ?>><a href="?page=news"> News</a></li>
<li<?php if($_GET['page']=="about") { echo " class='"active'""; } ?>><a href="?page=about"> About</a></li>
<li<?php if($_GET['page']=="contact"){ echo " class='"active'""; } ?>><a href="?page=contact"> Contact</a></li>
</ul>
然后将以下样式添加到 CSS 中：
.active {
font-weight: bold;
}
试试这段代码：
<section id="section1">
<h2>London1</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<section id="section2" style="display:none">
<h2>London2</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<section id="section3" style="display:none">
<h2>London3</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<?php include 'footer.php'; ?>
<script type="text/javascript">
$(document).ready(function(){
$("#1").click(function(){
$("#section1").show();
$("#section2").hide();
$("#section3").hide();
});
$("#2").click(function(){
$("#section1").hide();
$("#section2").show();
$("#section3").hide();
});
$("#3").click(function(){
$("#section1").hide();
$("#section2").hide();
$("#section3").show();
});
})
</script>
<nav class="navbar">
<?php // var_dump($_SERVER["PHP_SELF"]); ?> <!-- this will show your url -->
<a class="default-link-style <?php if($_SERVER["PHP_SELF"]=='/your-path-here-uncomment-var_dump-to-get-it/index.php'){echo 'style-active';}?>" href="index.php">Home</a>
<a class="default-link-style <?php if($_SERVER["PHP_SELF"]=='/your-path-here-uncomment-var_dump-to-get-it/new-page-here.php'){echo 'style-active';}?>" href="new-page-here.php">New Page Here</a>
<a class="default-link-style <?php if($_SERVER["PHP_SELF"]=='/your-path-here-uncomment-var_dump-to-get-it/next.php'){echo 'style-active';}?>" href="next.php">Next</a>
</nav>
<style>
.style-active {
text-decoration: red underline overline wavy;
}
<style>
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./mycss.css" type="text/css">
<title>HOME (page 1/5)</title>
<!--
This is an HTML page with four major subdivisions: header, nav, main,
footer.
The navigation subdivision is the focus of this example.
The site, including the nav menu, would be styled using CSS in the
external stylesheet.
-->
</head>
<body id="home"> <!-- id indicates page; is used by menu CSS to indicate
active page. No JS needed. -->
<div class="outer">
<header>
<figure>
<img src="http://placehold.it/450x115/" alt="MyCompany Logo"
width="450" height="115">
<h1>My Home Maintenance Co.</h1>
<figcaption>
<p>No home repair job in the Valley area is too big for us.
</p>
</figcaption>
</figure>
</header>
<nav>
<ul>
<li class="home"><a href="home.html">home</a></li>
<li class="aboutus"><a href="aboutus.html">about us</a></li>
<li class="services"><a href="services.html">services</a></li>
<li class="projects"><a href="projects.html">projects</a></li>
<li class="contact"><a href="contact.html">contact</a></li>
</ul>
</nav>
<main>
<div></div> <!-- Use whatever tags are appropriate for content. -->
</main>
<footer>
<div></div> <!-- Use whatever tags are appropriate for content. -->
</footer>
</div>
</body>
</html>
<div id="nav">
<button id="1">London1</button><br>
<button id="2">2</button><br>
<button id="3">3</button><br>
</div>
<div id="nav">
<a href="index.php">paris1</a><br>
<a href="paris.php">pzris2</a><br>
<a href="tokyo.php">paris3</a><br>
</div>
<?php include 'header.php'; ?>
<?php include 'nav1.php'; ?>
<?php include 'footer.php'; ?>