php - 如何在php中设置当前页面“活动”

Question

嗨，我的网站上的每个页面都有一个菜单，我想把它放在它自己的 menu.php 文件中，但我不确定如何为我所在的任何页面设置class="active"。这是我的代码：请帮助我

菜单.php：

<li class=" has-sub">
    <a class="" href="javascript:;"><i class=" icon-time"></i> Zeiten<span class="arrow"></span></a>
    <ul class="sub">
       <li><a class="" href="offnungszeiten.php">Öffnungszeiten</a></li>
       <li><a class="" href="sauna.php">Sauna</a></li>
       <li><a class="" href="frauensauna.php">Frauensauna</a></li>
       <li class=""><a class="" href="custom.php">Beauty Lounge</a></li>
       <li><a class="" href="feiertage.php">Feiertage</a></li>
    </ul>
</li>

score 33 · Accepted Answer

此方法使用 php 获取当前页面，在这种情况下将传递一个单词 active 并将其放在 class 参数中以将页面设置为活动状态。

<?php
function active($currect_page){
  $url_array =  explode('/', $_SERVER['REQUEST_URI']) ;
  $url = end($url_array);  
  if($currect_page == $url){
      echo 'active'; //class name in css 
  } 
}
?>
<ul>
    <li><a class="<?php active('page1.php');?>" href="http://localhost/page1.php">page1</a></li>
    <li><a class="<?php active('page2.php');?>" href="http://localhost/page2.php">page2</a></li>
    <li><a class="<?php active('page3.php');?>" href="http://localhost/page3.php">page3</a></li>
    <li><a class="<?php active('page4.php');?>" href="http://localhost/page4.php">page4</a></li>
</ul>

score 16 · Accepted Answer

如果您在脚本中构建一个页面数组并将其与当前活动页面一起传递给视图文件会更容易：

//index.php or controller

$pages = array();
$pages["offnungszeiten.php"] = "Öffnungszeiten";
$pages["sauna.php"] = "Sauna";
$pages["frauensauna.php"] = "Frauensauna";
$pages["custom.php"] = "Beauty Lounge";
$pages["feiertage.php"] = "Feiertage";

$activePage = "offnungszeiten.php";


//menu.php
<?php foreach($pages as $url=>$title):?>
  <li>
       <a <?php if($url === $activePage):?>class="active"<?php endif;?> href="<?php echo $url;?>">
         <?php echo $title;?>
      </a>
  </li>

<?php endforeach;?>

使用Smarty这样的模板引擎，您的 menu.php 会看起来更好：

//menu.php
{foreach $pages as $url=>$title}
   <li>
       <a {if $url === $activePage}class="active"{/if} href="{$url}">
         {$title}
      </a>
   </li>
{/foreach}

score 11 · Accepted Answer

在每个 php 文件中创建一个变量，例如：

$activePage = "sauna"; (different for each page)

然后像这样检查你的html页面中的变量

<?php if ($activePage =="sauna") {?>
 class="active" <?php } ?>

score 9 · Accepted Answer

将以下所有代码放入其中menu.php，一切都会得到处理。

// function to get the current page name
function PageName() {
  return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}

$current_page = PageName();

使用上面的内容获取当前页面名称，然后将其放入您的菜单中

<li><a class="<?php echo $current_page == 'offnungszeiten.php' ? 'active':NULL ?>" href="offnungszeiten.php">Öffnungszeiten</a></li>
<li><a class="<?php echo $current_page == 'sauna.php' ? 'active':NULL ?>" href="sauna.php">Sauna</a></li>
<li><a class="<?php echo $current_page == 'frauensauna.php' ? 'active':NULL ?>" href="frauensauna.php">Frauensauna</a></li>
<li><a class="<?php echo $current_page == 'custom.php' ? 'active':NULL ?>" href="custom.php">Beauty Lounge</a></li>
<li><a class="<?php echo $current_page == 'feiertage.php' ? 'active':NULL ?>" href="feiertage.php">Feiertage</a></li>

active将突出显示您的菜单项的类的名称在哪里

score 2 · Accepted Answer

你可以做两件事。

$_SERVER['PHP_SELF']首先，您可以通过使用或$_SERVER['REQUEST_URI']任何其他$_SERVER 全局变量来读取您请求的 php 文件的当前文件名，您可以使用这些全局变量来读取当前页面并将其与链接的 url 进行比较，如下所示

  <a href="offnungszeiten.php" <?php if($_SERVER['PHP_SELF']=='offnungszeiten.php'){ ?>class="activatepage" <?php } ?> >
       Öffnungszeiten
    </a>

第二个是创建一个可以全局读取的变量，该变量将存储当前页面的当前名称，如下所示

<?php
$cur_page ="offnungszeiten"
?>

<a href="offnungszeiten.php" <?php if($cur_page=='offnungszeiten'){ ?>class="activatepage" <?php } ?> >
 Öffnungszeiten
</a>

score 1 · Accepted Answer

我已经用 php 用这种方式完成了，

function createTopNav($active)
{
    $pages = array(
        array(
            'name'=>'Home',
            'link'=>'index'
        ),
        array(
            'name'=>'Smartphone',
            'link'=>'smartphone'
        ),
        array(
            'name'=>'Tablet',
            'link'=>'tablet'
        ),
        array(
            'name'=>'About Us',
            'link'=>'about'
        ),
        array(
            'name'=>'Contact Us',
            'link'=>'contact'
        )
    );
    $res = "<ul>";
    $activePage = "";
    foreach($pages as $key=>$val)
    {
        if($val['link']==$active)
        {
            $res.= "<li><a href='".$val['link']."'  class='active'  >".$val['name']."</a></li>";
        }
        else
        {
            $res.= "<li><a href='".$val['link']."'>".$val['name']."</a></li>";          
        }
    }
    $res.="</ul>";
    return $res;
}

然后调用这个函数

echo createTopNav("about");

输出将是这样的

<ul>
   <li><a href="index">Home</a></li>
   <li><a href="smartphone">Smartphone</a></li>
   <li><a href="tablet">Tablet</a></li>
   <li><a href="about" class="active">About Us</a></li>
   <li><a href="contact">Contact Us</a></li>
</ul>

score 1 · Accepted Answer

我使用 jQuery/javascript 解决了这个问题，每次加载我的任何页面时都运行下面的代码：

 $(document).ready(function () {    
    //Get CurrentUrl variable by combining origin with pathname, this ensures that any url appendings (e.g. ?RecordId=100) are removed from the URL
    var CurrentUrl = window.location.origin+window.location.pathname;
    //Check which menu item is 'active' and adjust apply 'active' class so the item gets highlighted in the menu
    //Loop over each <a> element of the NavMenu container
    $('#NavMenu a').each(function(Key,Value)
        {
            //Check if the current url
            if(Value['href'] === CurrentUrl)
            {
                //We have a match, add the 'active' class to the parent item (li element).
                $(Value).parent().addClass('active');
            }
        });
 });

此实现假定您的菜单具有“NavMenu”ID，并使用http://hostname/scriptname.phphref 属性，如下所示：

 <ul id="NavMenu">
   <li><a href="http://localhost/index.php">Home</a></li>
   <li><a href="http://localhost/smartphone.php">Smartphone</a></li>
   <li><a href="http://localhost/tablet.php">Tablet</a></li>
   <li><a href="http://localhost/about.php" class="active">About Us</a></li>
   <li><a href="http://localhost/contact.php">Contact Us</a></li>
</ul>

阅读 javascript 评论以了解发生了什么。如果您更喜欢使用不同的 href 布局（如在原始示例中），则必须稍微使用 CurrentUrl 变量以使其使用与 href 属性相同的布局。

对我来说，这是最简单的解决方案，因为我有一个现有的站点，其中包含一个大菜单和许多页面，并且希望避免修改所有页面。这使我可以在头文件（已经是一个中心文件）中添加一段 javascript 代码，从而解决所有现有页面的问题。

score 0 · Accepted Answer

0

在查询字符串中发送页面名称并通过获取变量在每个页面上检查它。

于 2013-04-12T05:38:39.633 回答

score 0 · Accepted Answer

更简单的解决方案：

asprin从上面借用代码；

创建一个新文件menu.php，您将在其中存储菜单的唯一副本。在此文件中，您将创建一个函数，该函数addMenu($pageName)将参数作为页面名称，并在添加当前标签后返回由菜单组成的字符串。

在您的 HTML 代码中，您将使用当前页面名称include(menu.php)调用该函数。addMenu因此，您的代码将如下所示：

菜单.php

     <?php

        function addMenu($pageName){
            $menu = 

                '<ul>
                    <li><a href="Öffnungszeiten.php"' . ($pageName == "Öffnungszeiten" ? "class=\"current\"" : "") . '><span>Öffnungszeiten</span></a></li>
                    <li><a href="sauna.php"' . ($pageName == "Öffnungszeiten" ? "class=\"current\"" : "") . '><span>Sauna</span></a></li>
                    <li><a href="frauensauna.php"' . ($pageName == "Frauensauna" ? "class=\"current\"" : "") . '><span>Frauensauna</span></a></li>
                    <li><a href="custom.php" ' . ($pageName == "lounge" ? "class=\"current\"" : "") . '><span>Beauty Lounge</span></a></li>
                    <li><a href="Feiertage.php"' . ($pageName == "feiertage" ? "class=\"current\"" : "") . '><span>Feiertage</span></a></li>                                                                                
                </ul>';
          return $menu;
    }
        ?>

在你的 HTML 中，这样说：

<div id="menu">
            <?php
                include('menu.php');
                echo addMenu("index");
                echo $hello;     
            ?>
        </div>

score 0 · Accepted Answer

有点晚了，但我只需要自己解决这个问题，最后使用这个 Javascript 方法，稍作修改。这样做的好处是不需要对当前代码进行很多更改，只需运行脚本即可。

window.onload = activateCurrentLink;

function activateCurrentLink(){
    var a = document.getElementsByTagName("A");
    for(var i=0;i<a.length;i++)
        if(a[i].href == window.location.href.split("#")[0])
            a[i].className = 'activelink';
}

score 0 · Accepted Answer

这对我有用：

    function active_page($script){

    $actual = basename($_SERVER['PHP_SELF']);

  if($script == $actual){
      return 'active-page'; //class name in css
  }
}

score 0 · Accepted Answer

我有一些简单的例子，见下文：

<?php
function active($currect_page) {
    $url = $_SERVER['REQUEST_URI'];

    if($currect_page == $url){
        echo 'active';
    }
}
?>

<ul class="navbar-nav mr-auto">
  <li class="nav-item <?php active('/');?>">
    <a class="nav-link" href="/">Home</a>
  </li>
  <li class="nav-item <?php active('/other');?>">
    <a class="nav-link" href="/other">Other page</a>
  </li>
</ul>

score 0 · Accepted Answer

迟到总比没有好 - 老实说，我喜欢保持简单，尤其是在有大量脚本和 PHP 的情况下。

我将此代码放在每个页面的顶部以识别页面：

<?php
  $current_page = 'home';
  include 'header.php';
?>

然后你的菜单/导航（我的是 bootstrap 4）看起来像这样：

<ul class="navbar-nav mx-auto">
  <li class="nav-item <?php if ($current_page=="home") {echo "active"; }?>">
      <a class="nav-link" href="<?php echo SITEURL;?>/">Home</a>
  </li>
  <li class="nav-item <?php if ($current_page=="about") {echo "active"; }?>">
      <a href="<?php echo SITEURL;?>/about" class="nav-link ">About</a>
  </li>
  <li class="nav-item <?php if ($current_page=="store") {echo "active"; }?>">
      <a href="<?php echo SITEURL;?>/store" class="nav-link">Store</a>
  </li>
  <li class="nav-item <?php if ($current_page=="news") {echo "active"; }?>">
        <a href="<?php echo SITEURL;?>/news" class="nav-link">News</a>
  </li>
  <li class="nav-item <?php if ($current_page=="contact") {echo "active"; }?>">
      <a href="<?php echo SITEURL;?>/content/contact-us" class="nav-link ">Contact</a>
  </li>
</ul>

我并不是说这是最佳方法，但它对我有用并且易于实施。

score 0 · Accepted Answer

添加这个：<?= ($activePage == 'home') ? 'active':''; ?>到我的链接它工作得很好，我只能让子菜单的子菜单工作以使父菜单处于活动状态。

score 0 · Accepted Answer

假设您有一个包含以下项目的导航栏：

<ul>
   <li id="menu-item-home"><a href="index.php">HOME</a></li>
   <li id="menu-item-services"><a href="/services.php">SERVICES</a></li>
   <li id="menu-item-about-us"><a href="/about-us.php">ABOUT US</a></li>
   <li id="menu-item-contact"><a href="/contact.php">CONTACT</a></li>      
</ul>

然后，在每个页面中声明一个 javascript 变量，如下所示：

<script>
    <?php echo("var active = 'menu-item-home';"); ?>
</script>

变量“active”被分配了每个页面的相应项目。

现在，您可以使用此变量突出显示活动菜单项，如下所示。

$(window).ready(function(){$("#" + active).addClass("active");});

score 0 · Accepted Answer

我的网络应用程序菜单也有类似的问题。我也有不显示为顶级菜单按钮的子菜单。

我的解决方案如下：

a) 带有菜单 html 的部分 php 文件和顶部的一个小 php 函数，用于根据菜单按钮检查 GET 变量。我有两个 GET 变量要检查：页面和（如有必要）menu_button。

b) 添加任何带有指向菜单页面或子菜单页面的 href 链接的新 php 页面。

变量“menu_button”是可选的，可用于链接到子菜单 php 文件。

当然，应该考虑 GET 变量的安全性。

从我的角度来看，这个解决方案比在某处维护一组页面或链接更省力。您只需使用获取变量“menu_button”，您可以在其中传递顶级菜单按钮，该按钮应在任何针对您的 php 文件的链接中进行可视标记。

代码示例：

部分 menu.php（必须包含在每个 php 文件中）：

<?php
  function active($page_link){
    $menu_button = $_GET("menu_button") ?: $_GET("page");  // sets the menu button either to the given top level menu or it defaults to the page itself
    if($menu_button === $page_link) return "active";
  }
?>

<div>
<a href="?page=one" class="<?= active('one') ?>"Link one</a>
<a href="?page=two" class="<?= active('two') ?>">Link two</a>
</div>

任何带有子菜单文件链接的 php 文件：

<div>
 <a href="?page=one">Link one</a>
 <a href="?page=three&menu_button=two">Link to sub menu page "three" of menu "two"</a>
</div>

为我工作。希望其他人可以使用这个。

score -1 · Accepted Answer

您可以使用

<?php
function active($current_page){
    $page = $_GET['p'];
    if(isset($page) && $page == $current_page){
        echo 'active'; //this is class name in css
    }
}
?>
<ul>
    <li><a class="<?php active('page1');?>" href="?p=page1">page1</a></li>
    <li><a class="<?php active('page2');?>" href="?p=page2">page2</a></li>
    <li><a class="<?php active('page3');?>" href="?p=page3">page3</a></li>
    <li><a class="<?php active('page4');?>" href="?p=page4">page4</a></li>
</ul>

php - 如何在php中设置当前页面“活动”

17 回答 17

Related

Reference