堆棧內存溢出
  簡體   English   中英

如何使用 php 將 class='active' 添加到 html 菜單

[英]How add class='active' to html menu with php

 原文  2010-05-26 13:34:28  2   14    php

問題描述

我想將我的 html 導航放在一個單獨的 php 文件中，這樣當我需要編輯它時，我只需編輯一次。 當我想將 class active 添加到活動頁面時，問題就開始了。

我有三頁和一份公用文件。

通用.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 一樣被打印出來

14 個解決方案

解決方案1
 26  2010-05-26 13:42:38

你為什么不這樣做：

在頁面中：

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

在導航.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>

實際上，您將能夠控制在頁面中放置導航的位置以及傳遞給它的參數。

后來編輯：修復了語法錯誤。

解決方案2
 12  2013-05-29 18:15:41

解決這個問題的一個非常簡單的方法就是這樣做。

<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
 8 已采納  2010-05-26 14:08:38

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

然后，您可以按照最初的意圖將邏輯直接包含在字符串中。

無論您選擇哪種方法，對腳本性能的影響都非常小（如果有的話）。 它主要歸結為偏好。 無論哪種方式，您都需要確保了解每種方式的工作原理。

解決方案4
 4  2010-05-26 13:36:50

我認為你需要把你的$page = 'one'; 上面的 require_once .. 否則我不明白這個問題。

解決方案5
 2  2010-05-26 13:41:39

為什么不為此導航創建一個函數或類並將活動頁面作為參數放在那里？ 這樣你就可以稱之為，例如：

$navigation = new Navigation( 1 );

或者

$navigation = navigation( 1 );

解決方案6
 2  2011-05-06 21:08:08

我知道這是舊的，但這些答案都不是很好（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  2010-05-26 13:42:55

  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
 1  2017-07-21 12:02:39

你可以使用這個 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
 0  2015-04-17 09:09:05

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
 0  2016-02-01 10:49:29

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

解決方案11
 0  2016-10-14 23:10:26

我正在使用的解決方案如下，並允許您為每個 php 頁面設置活動類。

給你的每個菜單項一個獨特的類，我使用.nav-x （nav-about，here）。

<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 per page， .nav-forum > a 。

如果您想為每個導航項設置不同的樣式（顏色等），只需將內聯樣式附加到該頁面而不是索引/標題頁面。

解決方案12
 0  2016-12-20 11:19:33

將您的頁面與導航欄分開。

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 var 並將其放在“title”標簽之間。 盡管我將其發送到導航欄上方的標題頁面。

解決方案13
 0  2020-01-18 09:33:55

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

解決方案14
 0  2022-03-30 13:40:01

PHP代碼

      <?php 
  function activeClass($chkStr){
     // echo "testing data";
     // echo strlen($_SERVER['REQUEST_URI']);
     if($chkStr=="home" && strlen($_SERVER['REQUEST_URI'])<3){
        return "active";
     }
     
     if (stripos($_SERVER['REQUEST_URI'], $chkStr)!==false){
        return "active";
     }
     else{
        return "";
     }

  }

  ?>

HTML 代碼：

  <ul class="navbar-nav">
                       <li class="nav-item <?php echo activeClass("home"); ?>">
                          <a class="nav-link txt" href="/">Home <span class="sr-only">(current)</span></a>
                       </li>
                       <li class="nav-item  <?php echo activeClass("about-us.php"); ?>">
                          <a class="nav-link txt" href="about-us.php">About Us</a>
                       </li>
                       <li class="nav-item  <?php echo activeClass("services.php"); ?>">
                          <a class="nav-link txt" href="services.php">Services</a>
                       </li>
                       <li class="nav-item  <?php echo activeClass("our-team.php"); ?>">
                          <a class="nav-link txt" href="our-team.php">Our team</a>
                       </li>
                       <li class="nav-item  <?php echo activeClass("media-awards.php"); ?>">
                          <a class="nav-link txt" href="media-awards.php">Media & Awards</a>
                       </li>
                       <li class="nav-item  <?php echo activeClass("blog.php"); ?>">
                          <a class="nav-link txt" href="blog.php">Blog</a>
                       </li>
                       <li class="nav-item  <?php echo activeClass("contact-us.php"); ?>">
                          <a class="nav-link txt" href="contact-us.php">Contact Us</a>
                       </li>

                    </ul>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何添加兩個或更多的URL到活動類的PHP子菜單？ 使用php將活動類添加到菜單鏈接 當包含菜單使用php時如何在菜單錨上添加“活動”類 如何在Codeigniter的菜單上添加活動類 如何使用Wordpress在菜單中添加Active類 如何將活動類添加到菜單項 如何在動態菜單中添加活動類？ PHP主菜單-如果正在查看孩子，則將活動類添加到父類 將活動類添加到php生成的菜單中的所選鏈接 在復雜菜單中添加活動類
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM