An automated way to add a class to an anchor link corresponding to the current page

若如初见. 提交于 2019-12-12 05:48:46

问题


I have a jQuery way of adding a .current class to an anchor link based on the site url and the corresponding page (i.e., if I'm on the "about" page, it'll add a .current class to the anchor link in the nav menu that directs to "about.php"). It definitely does the job, and it's super simple, but I wanted a PHP way to accomplish this, in a similar fashion that Wordpress does. What I ended up with is something that is sort of unconventional and not easily modifiable (code below)

My question is: Is there an easier way of doing this? You'll see in my code that I have to assign a variable $nav[#] to each anchor link.. it's not the most convenient of things...

The HTML:

  <ul class="nav">
    <li><a href="index.php" class="<?php echo $nav1; ?>">home</a></li>
    <li><a href="publications.php" class="<?php echo $nav2; ?>">publications</a></li>
    <li><a href="research.php" class="<?php echo $nav3; ?>">research</a></li>
    <li><a href="cv.php" class="<?php echo $nav4; ?>">cv</a></li>
    <li><a href="contact.php" class="<?php echo $nav5; ?>">contact</a></li>
  </ul>

The PHP:

<?php

function getUrl() {
  $url  = @( $_SERVER["HTTPS"] != 'on' ) ? 'http://'.$_SERVER["SERVER_NAME"] :  'https://'.$_SERVER["SERVER_NAME"];
  $url .= ( $_SERVER["SERVER_PORT"] !== 80 ) ? ":".$_SERVER["SERVER_PORT"] : "";
  $url .= $_SERVER["REQUEST_URI"];
  return $url;
}

$myurl = getUrl() ; // As was suggested, I could also just set $myurl = $_SERVER['PHP_SELF'] and avoid the complicated function call

$split_url = explode("/" , $myurl) ;

$page = end($split_url) ; 

$nav1 = $nav2 = $nav3 = $nav4 = $nav5 = ' ' ; 

if ( $page == "publications.php" )
    $nav2 = 'current' ; 

else if ( $page == "research.php")
    $nav3 = 'current' ; 

else if ( $page == "cv.php" )
    $nav4 = 'current' ; 

else if ( $page == 'contact.php') 
    $nav5 = 'current' ; 

?>

回答1:


Take a look at $_SERVER['PHP_SELF']. It will give the file name of the current file being served.

Here's a function that will add the current class if the page matches the $_SERVER['PHP_SELF'].

<?php

function add_current_class($page_name) {
  if( $page_name == $_SERVER['PHP_SELF'] ) {
    return ' current';
  }
}

Usage would be as follows.

<ul class="nav">
   <li><a href="index.php" class="<?php echo add_current_class('index.php'); ?>">home</a></li>
   <li><a href="publications.php" class="<?php echo add_current_class('publications.php'); ?>">publications</a></li>
   <li><a href="research.php" class="<?php echo add_current_class('research.php'); ?>">research</a></li>
   <li><a href="cv.php" class="<?php echo add_current_class('cv.php'); ?>">cv</a></li>
   <li><a href="contact.php" class="<?php echo add_current_class('contact.php'); ?>">contact</a></li>
 </ul>

If you wanted to really make it special you could do something like this.

<?php 

function display_navigation() {
  $pages = array(
    'index.php' => 'home',
    'publications.php' => 'publications',
    'research.php' => 'research',
    'cv.php' => 'cv',
    'contact.php' => 'contact'
  );

  $link = '<li><a class="%s" href="%s">%s</a></li>';

  echo '<ul class="nav">';
  foreach( $pages as $page => $text ) {
    printf($link, add_current_class($page), $page, $text);
  }
  echo '</ul>';
}



回答2:


Here's the version I would recommend:

<?php
    $selectedClass = "current";
    $nav1 = $nav2 = $nav3 = $nav4 = $nav5 = ' ' ; 
?>

<ul class="nav">
   <li><a href="index.php" class="<?=$nav1?> <?=(($_SERVER['PHP_SELF'] == "index.php") ? $selectedClass : '')?>">home</a></li>
   <li><a href="publications.php" class="<?=$nav2?> <?=(($_SERVER['PHP_SELF'] == "publications.php") ? $selectedClass : '')?>">publications</a></li>
   <li><a href="research.php" class="<?=$nav3?> <?=(($_SERVER['PHP_SELF'] == "research.php") ? $selectedClass : '')?>">research</a></li>
   <li><a href="cv.php" class="<?=$nav4?> <?=(($_SERVER['PHP_SELF'] == "cv.php") ? $selectedClass : '')?>">cv</a></li>
   <li><a href="contact.php" class="<?=$nav5?> <?=(($_SERVER['PHP_SELF'] == "contact.php") ? $selectedClass : '')?>">contact</a></li>
 </ul>

This method accomplishes several things, as opposed to Baylor Rae' answer:

  • It's clear what's happening here by reading the html directly since the conditional statement is included.
  • You can very easily define and change your "selected" class by simply changing a variable.
  • Each link can have its own specific class ($nav1, $nav2 etc) regardless of whether it has the "selected" class or not.


来源:https://stackoverflow.com/questions/11533668/an-automated-way-to-add-a-class-to-an-anchor-link-corresponding-to-the-current-p

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!