【问题标题】:How add class='active' to html menu with php如何使用 php 将 class='active' 添加到 html 菜单
【发布时间】:2023-03-26 19:45:01
【问题描述】:

我想把我的 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: 所有三个页面都是相同的,只是每个页面上的 $page 不同。

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

除非我将导航放在每个页面上,否则这根本行不通,但是将导航与所有页面分开的整个目的都被破坏了。

我想要完成的事情是否可能?我做错了什么?

谢谢

编辑:执行此操作时,li 中的 php 代码似乎没有运行,它只是像 html 一样被打印

【问题讨论】:

  • 首先,PHP 不会在 heredoc 字符串中解析(仅变量),其次,结束标识符(即 EOD)必须位于行首。
  • 是的,对不起,我知道,认为这样阅读会更容易。 EOD 在我的代码行的开头,这不是问题。我的问题是它准确地打印了 EOD 中的内容,还有 php。
  • 打印php的原因是语法错误: if($page == 'one'): ?> 应该是

标签: php


【解决方案1】:

你为什么不这样做:

在页面中:

<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>

您实际上将能够控制在页面中放置导航的位置以及传递给它的参数。

后期编辑:修正语法错误。

【讨论】:

  • 比较您的代码和他的代码(虽然他使用 heredoc 语法存在问题,但效果很好),我更愿意进入代码查看他的代码。变量在页面顶部声明,变量用于放置导航。简单的格式问题,但个人喜好。无论如何,虽然你的答案很好,但它并没有解决所提出的问题。
  • 我把它改成了 它完全奏效了!谢谢你摇滚!
  • 自从我开始做编程以来,我就开始珍惜一个原则。它被称为信息的局部性。基本上,您希望拥有推理某些代码所需的所有信息。这使您能够在本地决定某些代码的用途,并迫使您去 n 个地方收集该信息。
  • @Joseph:通常我会写以下内容: 像这样: 'one')); ?> 但它会更容易地举例说明。
  • 那么,是更喜欢制作一个全新的 nav.php 文件,还是喜欢 joseph 的建议,只需使用 ".(($page == 'one') ?'class="活动"' : '')。"在字符串中?
【解决方案2】:

解决这个问题的一个非常简单的方法就是这样做。

<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>

【讨论】:

    【解决方案3】:

    您的 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>";
     ?>
    

    然后你可以像你最初想要的那样直接在字符串中包含逻辑。

    无论您选择哪种方法,对脚本性能的影响都非常小(如果有的话)。它主要归结为偏好。无论哪种方式,您都需要确保了解每种方式的工作原理。

    【讨论】:

    • 所以,最好的办法是像 Toader Mihai Claudiu 建议的那样创建一个新文件 nav.php,或者干脆使用 ".(($page == 'one') ? 'class="active"' :'')。”在字符串中?因为这两种方式都有效..
    【解决方案4】:

    我认为您需要将 $page = 'one'; 放在 require_once 之上。否则我不明白这个问题。

    【讨论】:

    • 嗨!如果我将 $page 放在 require_once 之前或之后,没有区别。它仍然打印相同的内容:
    • PHP 未在 heredoc 字符串中解析。
    • 啊等等我忽略了一些东西。您将整个代码放在 &lt;&lt;&lt;EOD 块中。您在其中的 PHP 代码不会被解析。尝试删除 common.php 文件中的前 2 行和最后 2 行。 (所以你只剩下 HTML)。
    【解决方案5】:

    您为什么不为此导航创建一个函数或类并将活动页面作为参数放在那里?这种方式你可以称之为,例如:

    $navigation = new Navigation( 1 );
    

    $navigation = navigation( 1 );
    

    【讨论】:

      【解决方案6】:

      我知道这是旧的,但这些答案都不是很好(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";
      }
      

      【讨论】:

        【解决方案7】:
        1. $page='one' 应该出现在之前require_once() 而不是之后。之后为时已晚 - 代码已经被要求,$nav 已经被定义。

        2. 您应该使用include('header.php');include('footer.php'); 而不是尽早设置$nav 变量。这增加了灵活性。

        3. 制作更多功能。这样的事情确实让事情变得更容易理解:

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

          然后你可以这样写你的“条件”:

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

        【讨论】:

          【解决方案8】:

          你可以使用这个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>
          

          【讨论】:

            【解决方案9】:
            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'); ?>
            

            【讨论】:

              【解决方案10】:
                           <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>
              

              【讨论】:

              • 介意编辑你的答案并添加详细的描述。
              • 如果您在 news.php 页面上意味着它激活了当前 news.php 页面菜单
              【解决方案11】:

              我使用的解决方案如下,允许您为每个 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 &gt; a,例如.nav-forum &gt; a

              如果您想要为每个导航项设置不同的样式(颜色等),只需将内联样式附加到该页面而不是索引/标题页。

              【讨论】:

                【解决方案12】:

                将您的页面与导航栏分开。

                pageOne.php:

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

                导航.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 变量并将其放在“title”标签之间。虽然我将其发送到导航栏上方的标题页。

                【讨论】:

                  【解决方案13】:
                  <a href="store/index" <?php if($_SERVER['REQUEST_URI'] == '/store/index') { ?>class="active"<?php } ?> > Link </a>
                  <a href="account/referral" <?php if($_SERVER['REQUEST_URI'] == '/account/referral') { ?>class="active"<?php } ?> > Link </a> 
                  

                  【讨论】:

                    猜你喜欢
                    • 2012-10-31
                    • 2013-10-19
                    • 2014-06-16
                    • 2019-06-01
                    • 2015-01-11
                    • 2018-01-27
                    • 1970-01-01
                    • 2013-12-23
                    • 1970-01-01
                    相关资源
                    最近更新 更多