javascript – Active Class in HTML-ThrowExceptions

Exception or error:

I have Nav menu in HTML and im trying to achieve an easy method to highlight the active page.
The method im using currently is

Calling this in my HTML

<?php $var = 27; include('PHP/HTML-NavigationBar.php'); ?>

PHP Nav Menu

<a class="<?php echo (($var==27)?'active':'');?>" href="Text.php">Text</a>
<a class="<?php echo (($var==28)?'active':'');?>" href="Text2.php">Text2</a>

active is a class used to highlight a particular Nav.
Im currently calling the var in every HTML File.
I also have a NextPage and a PrevPage button which i manually have to mention next and prev pages names.
Is there anyway to automate this where i could get the number of the present page and add 1 to that when i click on the next page and minus 1 when i click on prev? And also any alternative for specifying the number in every layout as the number of pages is getting higher. I dont mind a suggestion including HTML/CSS/JavaScript or PHP

Next and Prev Button

<a href="Prev.php" class="buttonprev"> Previous </a>
<a href="Next.php" class="buttonnext"> Next </a>
How to solve:

if you decide to go with a php file to host links, just create an array within that:

$nav_items = array(
    1 => array("Text1.php", "Navigation title 1"),
    2 => array("Text2.php", "Navigation title 2"),
    3 => array("Text3.php", "Navigation title 3"),
    4 => array("Text4.php", "Navigation title 4"),
);

Than in your code you reference it like so:

foreach ($nav_items as $key => $value) {
  $class = "";
  if($key == $var) { 
    $class = "active"; 
  }
  echo '<a class="'.$class.'" href="'.$value[0].'">'.$value[1].'</a>';
}

Haven’t tested it yet, but it should work fine.
You would still need to define $var on each page though.

Answer´╝Ü

You can hold the URLs and titles in an array (or fetch it from database). Then you can iterate over it within a function and calculate the previous/next page within another function. You can use e.g. the $_SERVER['REQUEST_URI'] variable to figure out which page has been requested.

<?php
function navigation() // just not to spam namespace with variables
{
  $pages = // you can fetch this from database as well
  [
    [ 'url' => '/demo/some-page.php'       , 'title' => 'some page' ],
    [ 'url' => '/demo/another-page.php'    , 'title' => 'another page' ],
    [ 'url' => '/demo/yet-another-page.php', 'title' => 'yet another page' ],
    [ 'url' => '/demo/last-page.php'       , 'title' => 'last page' ],
  ];

  $index = array_search($_SERVER['REQUEST_URI'], array_column($pages, 'url'));

  $nav_list = function() use ($pages, $index)
  {
?>
  <ul>
<?php
    foreach ($pages as $k => $v)
    {
?>
    <li> <a class="<?= $index === $k ? 'active':'' ?>" href="<?= $v['url']?>"><?= $v['title']?></a> </li>
<?php
    }
?>
  </ul>
<?php
  };

  $prev_next = function() use($pages, $index)
  {
    if(false !== $index)
    {
      if($index > 0)
      {
        $v = $pages[$index - 1];
      ?>
        <a class="buttonprev" href="<?=$v['url']?>"><?=$v['title']?></a>
      <?php
      }

      if($index < count($pages) - 1)
      {
        $v = $pages[$index + 1];
      ?>
        <a class="buttonnext" href="<?=$v['url']?>"><?=$v['title']?></a>
      <?php
      }
    }
  };

  return [$nav_list, $prev_next];
}

[$nav_list, $prev_next] = navigation();

In your hardcoded page file you just include that and call the functions:

<?php
require_once 'nav.php';

$nav_list();
$prev_next();

Leave a Reply

Your email address will not be published. Required fields are marked *