使用 php 在菜单项上设置活动类答案

【问题标题】：Setting an active class on a menu item with php使用 php 在菜单项上设置活动类
【发布时间】：2013-04-19 23:46:12
【问题描述】：

我有一个由<ul><li> 元素和class="active" 组成的简单菜单来标记当前页面。通过$_get[]传递一个变量，通过url选择特定页面：?pg=PAGE。

我对 php 还很陌生，还在学习。这工作得很好，但我觉得应该有一个更简单和更短的方法。

<ul class="nav">
  <li <?php if ($_GET['pg'] == "PAGE1") { echo "class=\"active\""; } ?>><a href="?pg=PAGE1">FIRST PAGE</a></li>
  <li <?php if ($_GET['pg'] == "PAGE2") { echo "class=\"active\""; } ?>><a href="?pg=PAGE2">SECOND PAGE</a></li>
</ul>

【问题讨论】：

您正在执行 N 个操作来打印 N 个链接。做任何事情都称为心灵感应 0:-) 其他任何事情都是代码本身的优化，而不是逻辑。

标签： php html menu

【解决方案1】：

<?php
    $pages = array(
        'PAGE1' => 'FIRST PAGE',
        'PAGE2' => 'SECOND PAGE');
?>

<ul class="nav">
  <?php foreach ($pages as $pageId => $pageTitle): ?>
  <li <?=(($_GET['pg'] == $pageId) ? 'class="active"' : '')?>><a href="?pg=<?=$pageId?>"><?=$pageTitle?></a></li>
  <?php endforeach; ?>
</ul>

http://php.net/manual/en/control-structures.foreach.php

不要重复——li-s 非常相似，唯一的区别在于页面 ID 和标题。一旦页面超过两页，这种方法将非常有用。

尝试将 PHP 和 HTML 尽可能分开——一旦您决定将它们保存在单独的文件中（有时您会这样做），这将使您的生活更轻松。

【讨论】：

我永远无法理解代码何时使用了这么多 <?php 和 <? 标记...在您的 <ul> 块中不少于 10 个。与包含 echo 语句的简单 foreach 块相比，使代码更难阅读。
在这个例子中，是的，可能。但是在真正的代码中，你有更多的 HTML，混合了 JavaScript 和 CSS，将所有这些都保存在 PHP echo 中是一场噩梦。
您将 HTML、JS 和 CSS 混合在一个视图中？这听起来确实像一场噩梦。
不是我。我通常是在可能的情况下试图摆脱这种情况的人。将 PHP echo-s 转换为类似模板的东西通常是第一步，HTML 编码器可以做进一步的清理。

【解决方案2】：

<?php

$navItems = [
  '/' => 'Home',
  '/about' => 'About',
  '/contact' => 'Contact'
];

function navItemClass($itemUri) {
  if ($_SERVER[REQUEST_URI] == $itemUri) {
    return 'is-active';
  }
  return '';
}

?>

...

<ul>
<?php foreach ($navItems as $uri => name): ?>
  <li class="<?php echo navItemClass($uri); ?>">
    <a href="<?php echo $uri; ?>">
      <?php echo $name; ?>
    </a>
  </li>
<?php endforeach; ?>
</ul>

【讨论】：

【解决方案3】：

使用ternary operator:

<?
$pg = $_GET['pg'];
?>

<ul class="nav">
    <li <?=($pg=="PAGE1"?'class="active"':'')?>><a href="?pg=PAGE1">FIRST PAGE</a></li>
    <li <?=($pg=="PAGE2"?'class="active"':'')?>><a href="?pg=PAGE2">SECOND PAGE</a></li>
</ul>

【讨论】：

它假定启用了短标签。我工作过的有自尊心的商店都没有这样做。 ;)
@Madbreaks 很有趣，根据我的经验，95% 短标签开启
不推荐使用短标签：php.net/manual/en/language.basic-syntax.phptags.php -- 没关系，这些在 95% 的机器上启用，您的代码在其他 5% 上仍然会失败。完整的标签将始终有效。
仅作记录，我参与过的大多数项目都出于遗留原因启用了短标签，但也有不允许在新代码中使用短标签的编码约定。

【解决方案4】：

您可以使用javascript/Jquery 来检查$_get[] 的值，并使用它动态地将一个类添加到li 标记中。这将消除检查每个 li 项目的需要，但可能对您来说可能有点复杂，因为您说您只是对此的新手。

无论如何，既然您正在学习，那么最好也开始朝那个方向寻找。 PHP and JS 大部分时间都是齐头并进的……

【讨论】：

Op 正在寻找如何改进服务器端代码。建议 jQuery 作为解决方案简直荒谬。
哇，冷静一下@Madbreaks。糟糕的一天？

【解决方案5】：

您可以将您的页面放入一个数组中，这样会更容易：

<ul class="nav">
<?
$pages = array();
$pages[] = array("PAGE1","FIRST PAGE");
$pages[] = array("PAGE2","SECOND PAGE");

foreach($pages as $page) { ?>
    <li <?=(($_GET['pg'] == $page[0])?'class=\"active\"':'')?>><a href="?pg=<?=$page[0]?>"><?=$page[1]?></a></li>
<? } ?>
</ul>

【讨论】：

【解决方案6】：

<?php
$server = $_SERVER['REQUEST_URI'];
$pages = array(
    'all_page' => '/university/index.php/pages/all_page',
    'page_add' => '/university/index.php/pages/page_add',
    'menus' => '/university/index.php/pages/index',
    'menu' => '/university/index.php/pages/',
    'sliderAdd' => '/university/index.php/Slider/sliderAdd',
    'sliderView' => '/university/index.php/Slider/sliderView',
    'Future' => '/university/index.php/Slider/Future',
    'contact_us' => '/university/index.php/pages/contact_us',
    'newsAdd' => '/university/index.php/News/newsAdd',
    'newsView' => '/university/index.php/News/index',
    'eventsAdd' => '/university/index.php/Events/eventsAdd',
    'eventsView' => '/university/index.php/Events/index',
    'emailPhone' => '/university/index.php/Slider/emailPhone',
    'Logos' => '/university/index.php/Slider/Logo',
    'footer_change' => '/university/index.php/Slider/footer_change'
);
?>
<div class="nab">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
            <li class="nav-header">
                <div class="dropdown profile-element"> <span style="margin-left:-15px;"> 
                        <img alt="image"  src="<?php echo base_url(); ?>upload/image-22082017080213.png" height="60" />
                    </span>

                </div>
                <div class="logo-element">
                    USMS
                </div>
            </li>
            <!--            <li>
                            <a href="<?php //echo site_url('dashboard/index');       ?>"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboard</span></a>
                        </li>-->
            <li<?php
extract($pages);
if ($all_page == $server || $page_add == $server) {
    ?> class="active" <?php } ?>>
                <a href=""><i class="fa fa-file-code-o"></i> <span class="nav-label">Pages </span> <span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">
                    <li <?php if ($page_add == $server) { ?> class="active" <?php } ?>><a href="<?php echo site_url('pages/page_add'); ?>">Pages Add </a></li>
                    <li <?php if ($all_page == $server) { ?> class="active" <?php } ?>><a href="<?php echo site_url('pages/all_page'); ?>">All Pages</a></li>


                </ul>
            </li>
            <li <?php if ($sliderAdd == $server || $sliderView == $server) { ?> class="active" <?php } ?>>
                <a href=""><i class="fa fa-film"></i> <span class="nav-label">Slider</span> <span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">
                    <li  <?php if ($sliderAdd == $server) { ?> class="active" <?php } ?>><a href="<?php echo site_url('Slider/sliderAdd'); ?>">Slider Add </a></li>
                    <li  <?php if ($sliderView == $server) { ?> class="active" <?php } ?>><a href="<?php echo site_url('Slider/sliderView'); ?>">Slider View</a></li>


                </ul>
            </li>

            <li  <?php if ($Future == $server) { ?> class="active" <?php } ?>> 
                <a href="<?php echo site_url('Slider/Future'); ?>"><i class="fa fa-cubes"></i> <span class="nav-label">Future</span></a>
            </li>




            <li <?php if ($contact_us == $server) { ?> class="active" <?php } ?>>
                <a href="<?php echo site_url('pages/contact_us'); ?>"><i class="fa fa-map-marker"></i> <span class="nav-label">Contact Us</span></a>
            </li>

            <li <?php if ($newsAdd == $server || $newsView == $server) { ?> class="active" <?php } ?>>
                <a href=""><i class="fa fa-newspaper-o"></i> <span class="nav-label">News</span> <span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">


                    <li<?php if ($newsAdd == $server) { ?> class="active" <?php } ?>><a href="<?php echo site_url('News/newsAdd'); ?>">News Add</a></li>
                    <li <?php if ($newsView == $server) { ?> class="active" <?php } ?>><a href="<?php echo site_url('News/index'); ?>">All News</a></li>`
`
                </ul>
            </li>


            <li <?php if ($eventsAdd == $server || $eventsView == $server) { ?> class="active" <?php } ?>>
                <a href=""><i class="fa fa-university"></i> <span class="nav-label">Events</span> <span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">


                    <li <?php if ($eventsAdd == $server) { ?> class="active" <?php } ?>><a href="<?php echo site_url('Events/eventsAdd'); ?>">Events Add</a></li>
                    <li <?php if ($eventsView == $server) { ?> class="active" <?php } ?>><a href="<?php echo site_url('Events/index'); ?>">All Events</a></li>
                </ul>
            </li>

            <li <?php if ($menus == $server || $menu == $server || $emailPhone == $server || $Logos == $server || $footer_change == $server) { ?> class="active" <?php } ?> >>
                <a href=""><i class="fa fa-gear"></i> <span class="nav-label">Setting</span> <span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">


                    <li <?php if ($emailPhone == $server) { ?> class="active" <?php } ?>><a href="<?php echo site_url('Slider/emailPhone'); ?>">Header Email And Phone Number#</a></li>
                    <li <?php if ($Logos == $server) { ?> class="active" <?php } ?>> <a href="<?php echo site_url('Slider/Logo'); ?>">Header Logo</a></li>
                    <li <?php if ($menus == $server || $menu == $server) { ?> class="active" <?php } ?> ><a href="<?php echo site_url('pages/index'); ?>">Menus</a></li>
                    <li <?php if ($footer_change == $server) { ?> class="active" <?php } ?>><a href="<?php echo site_url('Slider/footer_change'); ?>">Footer </a></li>
                </ul>
            </li>
        </ul>

    </div>
</div>

【讨论】：