如何在php中制作活动导航栏？答案

【问题标题】：How to make active navigation bar in php?如何在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";
    };
}
?>

【问题讨论】：

标签： php navigation

【解决方案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/" 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>

【讨论】：

此代码与问题的代码没有区别，对答案没有帮助。
我改了，试试这个。

【解决方案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'; ?>

【讨论】：