如何在循环中停止侧边栏导航中的活动类

时间:2015-12-12 05:37:22

标签: php css twitter-bootstrap sidebar

我编写了一个侧边栏导航,并在<li>为品牌类添加了循环。已经从数据库中提取出来了!

以下是补充工具栏导航的代码。

问题是<li class='active'>已启用所有li。我只想激活打开的网站页面。如何使用循环来分解li?

<div class="col-sm-2">
    <nav class="nav-sidebar">
        <ul class="nav">
            <li><a href="<?php echo(BASE_URL); ?>index.php">Home</a></li>
            <?php
            try {

                $brands = Brand::get_brands();
                foreach ($brands as $b) {

                    echo("<li class='active'><a href='" . BASE_URL . "products/products.php?brandID=$b->brandID'>$b->brand_name</a></li>");
                }
            } catch (Exception $ex) {
                echo("<li>" . $ex->getMessage() . "</li>");
            }
            ?> 

            <li class="nav-divider"></li>
            <li><a href="<?php echo(BASE_URL); ?>login.php"><i class="glyphicon glyphicon-off"></i> Sign in</a></li>
        </ul>
    </nav>
</div>

侧边栏截图的图片:Sidebar Navigation Screenshot

1 个答案:

答案 0 :(得分:1)

根据您所做的链接,我假设您的网址类似于yoursite.com/products/products.php?brandID=150。您可以通过调用$_GET['brandID']来使用网址中的brandID。

因此我们检查它是否已设置并将该值与循环内的brandID进行比较。

<div class="col-sm-2">
    <nav class="nav-sidebar">
        <ul class="nav">
            <li><a href="<?php echo(BASE_URL); ?>index.php">Home</a></li>
            <?php
            try {

                $brands = Brand::get_brands();
                foreach ($brands as $b) {
                    // adding this line:
                    $class = ( isset($_GET['brandID']) and $_GET['brandID'] == $b->brandID) ? ' class="active"' : '';
                    echo("<li".$class."><a href='" . BASE_URL . "products/products.php?brandID=$b->brandID'>$b->brand_name</a></li>");
                }
            } catch (Exception $ex) {
                echo("<li>" . $ex->getMessage() . "</li>");
            }
            ?> 

            <li class="nav-divider"></li>
            <li><a href="<?php echo(BASE_URL); ?>login.php"><i class="glyphicon glyphicon-off"></i> Sign in</a></li>
        </ul>
    </nav>
</div>