如何在php中制作活动导航栏？
Posted
技术标签:
【中文标题】如何在php中制作活动导航栏？【英文标题】：How to make active navigation bar in php? 【发布时间】：2013-11-14 00:19:12 【问题描述】：您好，我正在尝试使我的导航栏在 php 中处于活动状态，以便用户可以知道他们在哪个页面上。我是php新手，对它了解不多。那么如何在此代码中添加 class="active" 以创建活动导航栏并在同一 index.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";
;
?>
【问题讨论】：
【参考方案1】：创建一个菜单项数组，然后使用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，而且将来会为您节省大量时间！
【讨论】：
@sn0w 这有点尴尬。我编辑了上面的广告，添加了一些 HTML 结构以将其放入上下文中 我得到了第二个错误页面，如果我点击相同的链接两次它说找不到页面。假设我先点击新闻，它会显示一个新闻页面，但如果我再次点击它，它会显示页面未找到。 @sn0w ?page= 被排除在活动操作之外。我编辑了代码，现在应该可以工作了。【参考方案2】：您可以使用下面的 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;
【讨论】：
【参考方案3】：试试这个代码：
<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>
【讨论】：
【参考方案4】：<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>
【讨论】：
【参考方案5】：<!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/"
>
<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>
【讨论】：
此代码与问题的代码没有区别，对答案没有帮助。 我改了，试试这个。【参考方案6】：<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'; ?>
【讨论】：
以上是关于如何在php中制作活动导航栏？的主要内容，如果未能解决你的问题，请参考以下文章
如何为导航到实现底部导航栏的活动中的上一个片段进行后推操作？