如何使用php将class ='active'添加到html菜单中

时间:2010-05-26 13:34:29

标签: 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>

除非我将导航放在每个页面上,否则这根本不起作用,但是导航与所有页面分离的整个目的都会被破坏。

我想要完成的是什么?我做错了什么?

由于

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

13 个答案:

答案 0 :(得分:26)

你为什么不这样做:

在页面中:

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

您实际上可以控制导航页面的位置以及传递给它的参数。

稍后编辑:修复语法错误。

答案 1 :(得分:10)

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

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

答案 2 :(得分:7)

您的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; - 根本没有缩进。如果它是缩进的,那么你会得到错误。

至于你在heredoc语句中没有运行PHP代码的问题,那是因为你看错了。使用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>";
 ?>

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

无论选择哪种方法,脚本的性能都会产生很小的差异(如果有的话)。它主要归结为偏好。无论哪种方式,您都需要确保了解每种方法的工作原理。

答案 3 :(得分:3)

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

答案 4 :(得分:2)

我知道这已经过时了,但这些答案都不是很好(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";
}

答案 5 :(得分:1)

为什么不为此导航创建函数或类并将活动页面作为参数放置?这样你就可以称之为:

$navigation = new Navigation( 1 );

$navigation = navigation( 1 );

答案 6 :(得分:1)

  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')) ?>> ....
    

答案 7 :(得分:1)

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

答案 8 :(得分:0)

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 :(得分:0)

             <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 :(得分:0)

我正在使用的解决方案如下,允许您为每个php页面设置活动类。

为每个菜单项添加一个唯一的类,我使用library(data.table) loc.dat[] = lapply(loc.dat, function(col) tstrsplit(col, "=")[[2]]) loc.dat # imageNumber.1 imageNumber.2 imageNumber.3 #1 34.73388 34.73393 34.7339966667 #2 -106.7133033333 -106.7128583333 -106.7123566667 (nav-about,here)。

.nav-x

位于每个页面的顶部(此处为about.php):

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

其他地方(header.php / index.php):

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

只需更改每页<style> <?php echo $activeClass; ?> { color: #fff !important; } </style> .nav-about > a,例如。

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

答案 11 :(得分:0)

从导航栏中分离您的页面。

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

答案 12 :(得分:0)

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