How to properly build a navigation menu that highlights the current page

问题

I've setup a menu for a fairly simple site based on icant.co.uk. It's fairly simple with maybe 5 pages. The small site is mainly a mysql browser for a few tables using MATE. Theres a common.php file that contains the header & footer HTML so thats where I put the code below.

The code below highlights the current page on the menu. Its ugly and I'm sure there has to be a better way to do it.

Any help is appreciated, thank you!

heres my code

<?php
        $currentFile = Explode('/', $_SERVER["PHP_SELF"]);
        $currentFile = $currentFile[count($currentFile) - 1];

        if ($currentFile == "orders.php"){
                echo '<li id="active"><a href="orders.php" id="current">Orders</a></li>';
        }
        else{
                echo '<li><a href="orders.php">Orders</a></li>';
        }

        if ($currentFile == "customers.php"){
                echo '<li id="active"><a href="customers.php" id="current">Customer List</a></li>';
        }
        else{
                echo '<li><a href="customers.php">Customer List</a></li>';
        }

        if ($currentFile == "order_details.php"){
                echo '<li id="active"><a href="order_details.php" id="current">Order Details</a></li>';
        }
        else{
                echo '<li><a href="order_details.php">Order Details</a></li>';
        }
?>

UPDATE For those curious, below is the working code!

<?php
    $currentFile = Explode('/', $_SERVER["PHP_SELF"]);
    $currentFile = $currentFile[count($currentFile) - 1];

    // easier to manage in case you want more pages later
    $pages = array(
        array("file" => "orders.php", "title" => "Orders"),
        array("file" => "order_details.php", "title" => "Order Details"),
        array("file" => "customers.php", "title" => "Customer List")
    );
    $menuOutput = '<ul>';
    foreach ($pages as $page) {
       $activeAppend = ($page['file'] == $currentFile) ? ' id="active"' : "";
       $currentAppend = ($page['file'] == $currentFile) ? ' id="current' : "";
       $menuOutput .= '<li' . $activeAppend . '>'
                   .  '<a href="' . $page['file'] . '"' . $currentAppend . '">' . $page['title'] .'</a>'
                   .  '</li>'; 
    }           
    $menuOutput .= '</ul>';

    echo $menuOutput;

?>

回答1:

Not sure if that's what you meant, but this way you'll get rid of this ugly if-else:

$currentFile = Explode('/', $_SERVER["PHP_SELF"]);
$currentFile = $currentFile[count($currentFile) - 1];

// easier to manage in case you want more pages later
$pages = array(
    array("file" => "orders.php", "title" => "Orders"), 
    array("file" => "customers.php", "title" => "Customer List")
);
$menuOutput = '<ul>';
foreach ($pages as $page) {
   $activeAppend = ($page['file'] == $currentFile) ? ' id="active"' : "";
   $menuOutput .= '<li' . $activeAppend . '>'
               .  '<a href="' . $page['file'] . '">' . $page['title'] .'</a>'
               .  '</li>'; 
}           
$menuOutput .= '</ul>';

echo $menuOutput;

回答2:

What I normally do is something like (for all elements...):

<li class="<?php if (condition) echo 'selected'; ?>">content part, links, etc.</li>

回答3:

A more concise way of doing it (if you have short tags enabled) would be:

<li class="<?= $test=="your_page_name" ? 'selected' : 'not_selected'?>">Link Name</li>

It performs the same function as the first answer, just more concisely.

回答4:

Here's a snippet from a project of mine. It it old ugly code, and uses tables, but you can just as easily use the idea for divs and cleaner markup. The trick is to make the navigation use a different class if the current page matches it's url.

    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_home.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_home.php'>Billing Home</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_schedules.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_schedules.php'>Billing Schedules</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_outstanding.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_outstanding.php'>Outstanding</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_list.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_list.php'>List All</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_history.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_history.php'>Billing History</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_statement_history.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_statement_history.php'>Statement History</a></td></tr>

来源：https://stackoverflow.com/questions/1546106/how-to-properly-build-a-navigation-menu-that-highlights-the-current-page