【问题标题】:How to set current page "active" in php如何在php中设置当前页面“活动”
【发布时间】:2013-04-04 12:46:09
【问题描述】:

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

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

【问题讨论】:

  • 您的意思是活动链接吗?或使链接与其他链接不同?取决于当前页面?
  • 使用 $_SERVER['REQUEST_URI'].. 获取当前页面链接
  • 当您在任何页面(如 offnungszeiten 或桑拿等)上时,请留下您的网址
  • 这个问题不需要mysql标签

标签: php css


【解决方案1】:

此方法使用 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>

【讨论】:

  • 这里的最佳解决方案。
【解决方案2】:

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

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

【讨论】:

    【解决方案3】:

    在每个 php 文件中创建一个变量,例如:

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

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

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

    【讨论】:

      【解决方案4】:

      将以下所有代码放入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 是突出显示菜单项的类的名称

      【讨论】:

        【解决方案5】:

        你可以做两件事。

        首先,您可以使用$_SERVER['PHP_SELF']$_SERVER['REQUEST_URI'] 或任何其他$_SERVER global 变量来读取您请求的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>
        

        【讨论】:

        • 这是最好的答案(第一个)。
        【解决方案6】:

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

        【讨论】:

        • 这有什么意义?重点是将菜单放在单独的 php 文件中。如果您在每个页面上都包含整个菜单,则不需要php 函数
        【解决方案7】:

        我使用 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.php href 属性,如下所示:

         <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 cmets 以了解发生了什么。如果您喜欢使用不同的 href 布局(如原始示例中),则必须稍微使用 CurrentUrl 变量以使其使用与您的 href 属性相同的布局。

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

        【讨论】:

          【解决方案8】:

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

          【讨论】:

          • 真的吗?这构成了一个答案?
          【解决方案9】:

          简单的解决方案:

          借用上面asprin的代码;

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

          在您的 HTML 代码中,您将 include(menu.php) 然后使用当前页面名称调用函数 addMenu。所以您的代码将如下所示:

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

          【讨论】:

            【解决方案10】:

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

            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';
            }
            

            【讨论】:

              【解决方案11】:

              这对我有用:

                  function active_page($script){
              
                  $actual = basename($_SERVER['PHP_SELF']);
              
                if($script == $actual){
                    return 'active-page'; //class name in css
                }
              }
              

              【讨论】:

                【解决方案12】:

                我有一些简单的例子,见下文:

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

                【讨论】:

                  【解决方案13】:

                  迟到总比没有好 - 老实说,我喜欢保持简单,尤其是在有大量脚本和 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>
                  

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

                  【讨论】:

                    【解决方案14】:

                    将此:&lt;?= ($activePage == 'home') ? 'active':''; ?&gt; 添加到我的链接中它可以完美运行,我只能使子菜单的子菜单工作以使父菜单处于活动状态。

                    【讨论】:

                      【解决方案15】:

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

                      <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");});
                      

                      【讨论】:

                        【解决方案16】:

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

                        我的解决方法如下:

                        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>
                        

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

                        【讨论】:

                          【解决方案17】:

                          你可以使用

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

                          【讨论】:

                            猜你喜欢
                            • 1970-01-01
                            • 1970-01-01
                            • 1970-01-01
                            • 2023-01-28
                            • 1970-01-01
                            • 2020-01-01
                            • 1970-01-01
                            • 1970-01-01
                            • 1970-01-01
                            相关资源
                            最近更新 更多