How to make active navigation bar in php?

2019-05-29 02:20发布

站内问答 / PHP
1644 4 5

Hello I'm trying to make my navigation bar active in php, so that user can know in which page they are on. I'm new to php and don't know much about it. So how can I add a class="active" in this code to make a active nav bar and display all the page in same index.php page.

 <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";
    };
}
?>

4条回答
聊天终结者
2楼-- · 2019-05-29 02:53

Try this code: 

    <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>
查看更多
0人赞 添加讨论(0) 举报
Anthone
3楼-- · 2019-05-29 03:00 
<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'; ?>
查看更多
0人赞 添加讨论(0) 举报
淡お忘
4楼-- · 2019-05-29 03:02

Create an array of menu items and then use a foreach loop to generate the menu dynamically.

That way when you add new items to the array they will show up in the menu:

<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>

You should replace all of your code with this code and give it a spin. Using loops to reduce the amount of redundant markup you need to write is not only DRY but will save you a lot of time in the future!

查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
5楼-- · 2019-05-29 03:04

You can use the PHP code below as navigation. I recommend that you use unordered list (i.e. <ul><li><a href=""></a></li></ul>) tags for navigation:

<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>

Then add the below style to CSS:

.active {
    font-weight: bold;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)