Активный класс в HTML - PullRequest
Новая
       8

Активный класс в HTML

0 голосов
/ 17 марта 2020

У меня есть меню Nav в HTML, и я пытаюсь найти простой способ выделить активную страницу. В настоящее время я использую метод

Вызов этого в моем HTML

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

PHP Меню навигации 

<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 - это класс, используемый для выделения определенного Nav. В настоящее время я вызываю var в каждом HTML файле. У меня также есть кнопка NextPage и PrevPage, в которой я должен вручную указать названия следующих и предыдущих страниц. Есть ли способ автоматизировать это, где я мог бы получить номер текущей страницы и добавить 1 к этому, когда я нажимаю на следующую страницу, и минус 1, когда я нажимаю на предыдущий? А также любая альтернатива для указания числа в каждом макете по мере увеличения количества страниц. Я не возражаю против предложения, включающего HTML / CSS / JavaScript или PHP

Next и Prev Button 

<a href="Prev.php" class="buttonprev"> Previous </a>
<a href="Next.php" class="buttonnext"> Next </a>

Ответы [ 2 ]

0 голосов
/ 17 марта 2020

Вы можете хранить URL-адреса и заголовки в массиве (или получить его из базы данных). Затем вы можете выполнить итерацию по ней внутри функции и рассчитать предыдущую / следующую страницу внутри другой функции. Вы можете использовать, например, переменную $_SERVER['REQUEST_URI'], чтобы выяснить, какая страница была запрошена. 

<?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();

В вашем жестко запрограммированном файле страницы вы просто включаете его и вызываете функции: 

<?php
require_once 'nav.php';

$nav_list();
$prev_next();
0 голосов
/ 17 марта 2020

если вы решите go с файлом php для размещения ссылок, просто создайте массив внутри него: 

$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"),
);

Чем в своем коде вы ссылаетесь на него так: 

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

Еще не проверял, но он должен работать нормально. Вам все равно нужно будет определить $ var на каждой странице.

...