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

时间：2013-04-25 22:13:49

标签： php html menu

我有一个由<ul><li>元素和class="active"组成的简单菜单，用于标记当前页面。 $_get[]传递变量以按网址选择特定网页：?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>

5 个答案:

答案 0 :(得分：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尽可能分开 - 一旦您决定将它们保存在单独的文件中（有时您会这样做），这将使您的生活更轻松。

答案 1 :(得分：0)

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

答案 2 :(得分：0)

您可以使用javascript/Jquery检查$_get[]的值，并使用该值动态地向li标记添加类。这样就不需要对每个li项进行检查，但可能对您来说可能有点复杂，因为您声明自己只是新手。

无论如何，既然你正在学习，那么从这个方向开始也是很好的。 PHP and JS大部分时间都是齐头并进......

答案 3 :(得分：0)

你可以把你的页面放到一个数组中，让这更容易：

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

答案 4 :(得分：0)

<?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>
相关问题
最新问题