Как добавить class= 'active' в html-меню с php

Я хочу поместить мою html-навигацию в отдельный файл php, поэтому, когда мне нужно ее отредактировать, мне нужно только ее отредактировать. Проблема начинается, когда я хочу добавить класс активным на активную страницу.

У меня есть три страницы и один общий файл.

common.php:

<?php 
$nav = <<<EOD
   <div id="nav">
        <ul>
           <li><a <? if($page == 'one'): ?> class="active"<? endif ?> href="index.php">Tab1</a>/</li>
           <li><a href="two.php">Tab2</a></li>
           <li><a href="three.php">Tab3</a></li>
       </ul>
    </div>
EOD;
?>

index.php: Все три страницы идентичны, за исключением того, что их страница $отличается на каждой странице.

  <?php
     $page = 'one';      
     require_once('common.php');
    ?>
    <html>
       <head></head>
       <body>
          <?php echo $nav; ?>
       </body>
    </html>

Это просто не сработает, если я не поместил свой навигатор на каждую страницу, но тогда вся цель ветки навигатора со всех страниц разрушена.

Я хочу, чтобы это было возможно? Что я делаю неправильно?

Спасибо

EDIT: при этом PHP-код внутри li не работает, он просто печатается, как если бы он был html

Ответы

Ответ 1

Ваш код index.php верен. Я включаю обновленный код для common.php ниже, тогда я объясню различия.

<?php 
     $class = ($page == 'one') ? 'class="active"' : '';
     $nav = <<<EOD
        <div id="nav">
            <ul>
               <li><a $class href="index.php">Tab1</a>/</li>
               <li><a href="two.php">Tab2</a></li>
               <li><a href="three.php">Tab3</a></li>
           </ul>
        </div>
 EOD;
 ?>

Первая проблема заключается в том, что вам нужно убедиться, что конечная декларация для вашего heredoc - EOD; - не имеет отступов вообще. Если он отступил, вы получите ошибки.

Что касается вашей проблемы с кодом PHP, который не работает в инструкции heredoc, это потому, что вы смотрите на это неправильно. Использование инструкции heredoc не совпадает с закрытием тегов PHP. Таким образом, вам не нужно пытаться их повторно открыть. Это ничего не сделает для вас. Способ работы синтаксиса heredoc заключается в том, что все между открытием и закрытием отображается точно так же, как написано, за исключением переменных. Они заменяются соответствующим значением. Я удалил вашу логику из heredoc и использовал третичную функцию, чтобы определить класс, чтобы это стало легче видеть (хотя я не верю, что любые логические утверждения будут работать в heredoc в любом случае)

Чтобы понять синтаксис heredoc, это то же самое, что и включение в двойные кавычки ("), но без необходимости экранирования. Таким образом, ваш код также может быть написан следующим образом:

<?php 
     $class = ($page == 'one') ? 'class="active"' : '';
     $nav = "<div id=\"nav\">
            <ul>
               <li><a $class href=\"index.php\">Tab1</a>/</li>
               <li><a href=\"two.php\">Tab2</a></li>
               <li><a href=\"three.php\">Tab3</a></li>
           </ul>
        </div>";
 ?>

Он будет делать то же самое, просто написан несколько иначе. Другое отличие между heredoc и строкой состоит в том, что вы можете выйти из строки в середине, где вы не можете в heredoc. Используя эту логику, вы можете создать следующий код:

<?php 
     $nav = "<div id=\"nav\">
            <ul>
               <li><a ".(($page == 'one') ? 'class="active"' : '')." href=\"index.php\">Tab1</a>/</li>
               <li><a href=\"two.php\">Tab2</a></li>
               <li><a href=\"three.php\">Tab3</a></li>
           </ul>
        </div>";
 ?>

Затем вы можете включить логику непосредственно в строку, как вы первоначально предполагали.

Какой бы метод вы ни выбрали, очень мало (если есть) разница в производительности script. В основном это зависит от предпочтений. В любом случае, вам нужно убедиться, что вы понимаете, как они работают.

Ответ 2

почему бы вам не сделать это так:

на страницах:

<html>
   <head></head>
   <body>
      <?php $page = 'one'; include('navigation.php'); ?>
   </body>
</html>

в navigation.php

<div id="nav">
   <ul>
      <li>
          <a <?php echo ($page == 'one') ? "class='active'" : ""; ?> 
                 href="index1.php">Tab1</a>/</li>
      <li>
          <a <?php echo ($page == 'two') ? "class='active'" : ""; ?> 
                  href="index2.php">Tab2</a>/</li>
      <li>
          <a <?php echo ($page == 'three') ? "class='active'" : ""; ?> 
                  href="index3.php">Tab3</a>/</li>
   </ul>
</div>

Фактически вы сможете контролировать, где на странице, на которую вы устанавливаете навигацию, и какие параметры вы передаете ей.

Позднее редактирование: исправлена ​​синтаксическая ошибка.

Ответ 3

Очень простое решение этой проблемы - это сделать.

<ul>
  <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'current'; }else { echo ''; } ?>"><a href="index.php">Home</a></li>
  <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'portfolio.php'){echo 'current'; }else { echo ''; } ?>"><a href="portfolio.php">Portfolio</a></li>
  <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'services.php'){echo 'current'; }else { echo ''; } ?>"><a href="services.php">Services</a></li>
  <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'contact.php'){echo 'current'; }else { echo ''; } ?>"><a href="contact.php">Contact</a></li>
  <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'links.php'){echo 'current'; }else { echo ''; } ?>"><a href="links.php">Links</a></li>
</ul>

Который выведет

<ul>
  <li class="current"><a href="index.php">Home</a></li>
  <li class=""><a href="portfolio.php">Portfolio</a></li>
  <li class=""><a href="services.php">Services</a></li>
  <li class=""><a href="contact.php">Contact</a></li>
  <li class=""><a href="links.php">Links</a></li>
</ul>

Ответ 4

Я думаю, вам нужно поставить $page = 'one'; выше require_once. В противном случае я не понимаю вопроса.

Ответ 5

Я знаю, что это старо, но ни один из этих ответов не очень хорош (sry ppl)

ЛУЧШИЙ способ сделать это (без написания свернутых классов) - сравнить текущий $_SERVER ['REQUEST_URI'] с href ссылки. Ты почти там.

Попробуйте это. (Взято из http://ma.tt/scripts/intellimenu/)

$nav = <<<EOD
<div id="nav">
        <ul>
           <li><a href="index.php">Tab1</a></li>
           <li><a href="two.php">Tab2</a></li>
           <li><a href="three.php">Tab3</a></li>
       </ul>
    </div>
EOD;

$lines = explode("\n", $nav);
foreach($lines as $line)
{
    if(preg_match('/href="([^"]+)"/', $line, $url)) {
        if(substr($_SERVER['REQUEST_URI'], 0, 5) == substr($url[1], 0, 5)) {
            $line = str_replace('><a', ' class="current-menu-item"><a', $line);
        }
    }
    echo $line . "\n";
}

Ответ 6

Почему бы вам не создать функцию или класс для этой навигации и не разместить там активную страницу в качестве параметра? Таким образом вы бы назвали это, например:

$navigation = new Navigation( 1 );

или

$navigation = navigation( 1 );

Ответ 7

  • $page='one' должен произойти до вас require_once() не после. Слишком поздно - код уже требуется, а $nav уже определен.

  • Вы должны использовать include('header.php'); и include('footer.php'); вместо установки переменной $nav на ранней стадии. Это повышает гибкость.

  • Сделайте больше функций. Что-то вроде этого действительно облегчает работу:

    function maybe($x,$y){return $x?$y:'';}
function aclass($k){return " class=\"$k\" "; }

    тогда вы можете написать свое "условие" следующим образом:

    <a href="..." <?= maybe($page=='one',aclass('active')) ?>> ....

Ответ 8

CALL common.php
<style>
    .ddsmoothmenu ul li{float: left; padding: 0 20px;}
    .ddsmoothmenu ul li a{display: block;
  padding: 40px 15px 20px 15px;
  color: #4b4b4b;
  font-size: 13px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-align: right;
  text-transform: uppercase;
  margin-left: 1px; color: #fff; background: #000;}
    .current .test{  background: #2767A3; color: #fff;}
</style>
<div class="span8 ddsmoothmenu">
<!-- // Dropdown Menu // -->
<ul id="dropdown-menu" class="fixed">
    <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'current'; }else { echo ''; } ?>"><a href="index.php" class="test">Home  <i>::</i> <span>welcome</span></a></li>
    <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'about.php'){echo 'current'; }else { echo ''; } ?>"><a href="about.php" class="test">About us <i>::</i> <span>Who we are</span></a></li>
    <li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'course.php'){echo 'current'; }else { echo ''; } ?>"><a href="course.php">Our Courses  <i>::</i> <span>What we do</span></a></li>
</ul><!-- end #dropdown-menu -->

</div><!-- end .span8 -->

add each page
<?php include('common.php'); ?>

Ответ 9

             <ul>

                <li><a <?php echo ($page == "yourfilename") ? "class='active'" : ""; ?> href="user.php" ><span>Article</span></a></li>
                <li><a <?php echo ($page == "yourfilename") ? "class='active'" : ""; ?> href="newarticle.php"><span>New Articles</span></a></li>

                </ul>

Ответ 10

Решение, которое я использую, является следующим и позволяет вам установить активный класс на страницу php.

Дайте каждому из ваших элементов меню уникальный класс, я использую .nav-x (nav-about, здесь).

<li class="nav-item nav-about"> <a class="nav-link" href="about.php">About</a> </li>

В верхней части каждой страницы (about.php здесь):

<!-- Navbar Active Class -->
<?php $activeClass = '.nav-about > a'; ?>

В другом месте (header.php/index.php):

<style>
<?php echo $activeClass; ?> {
    color: #fff !important;
}
</style>

Просто измените .nav-about > a на страницу, .nav-forum > a, например.

Если вы хотите различный стиль (цвета и т.д.) для каждого элемента навигации, просто присоедините встроенный стиль к этой странице, а не страницу индекса/заголовка.

Ответ 11

отделите свою страницу от навигационной панели.

pageOne.php:

$page="one";
include("navigation.php");

navigation.php

if($page=="one"){$oneIsActive = 'class="active"';}else{ $oneIsActive=""; }
if($page=="two"){$twoIsActive = 'class="active"';}else{ $twoIsActive=""; }
if($page=="three"){$threeIsActive = 'class="active"';}else{ $threeIsActive=""; }

<ul class="nav">
  <li <?php echo $oneIsActive; ?>><a href="pageOne.php">One</a></li>
  <li <?php echo $twoIsActive; ?>><a href="pageTwo.php"><a href="#">Page 2</a></li>
  <li <?php echo $threeIsActive; ?>><a href="pageThree.php"><a href="#">Page 3</a></li>
</ul>

Я обнаружил, что также могу установить заголовок моих страниц с помощью этого метода.

 $page="one";
 $title="This is page one."
 include("navigation.php");

и просто возьмите $title var и поместите его между тегами заголовка. Хотя я отправляю его на мою заголовочную страницу над моей навигационной панелью.

Ответ 12

Вы можете использовать этот PHP, надеюсь, что это поможет.

<?php if(basename($_SERVER['PHP_SELF'], '.php') == 'home' ) { ?> class="active" <?php } else { ?> <?php }?>

Таким образом, список будет выглядеть следующим образом.

<ul>
  <li <?php if( basename($_SERVER['PHP_SELF'], '.php') == 'home' ) { ?> class="active" <?php } else { ?> <?php }?>><a href="home"><i class="fa fa-dashboard"></i> <span>Home</span></a></li>
  <li <?php if( basename($_SERVER['PHP_SELF'], '.php') == 'listings' ) { ?> class="active" <?php } else { ?> <?php }?>><a href="other"><i class="fa fa-th-list"></i> <span>Other</span></a></li>
</ul>