有没有更干净的方法来执行每个页面的侧边栏活动状态？

Question

我有这个侧边栏代码

    <li><a href="/restaurant_pos"><span>Restaurant POS Systems</span></a>
<ul>
    <li><a href="/restaurant_pos">Restaurant POS Systems</a></li>
    <li><a href="/bar_nightclub_pos">Bar and Nightclub POS Systems</a></li>
    <li><a href="/bbq-restaurant-pos">BBQ Restaurant POS</a></li>
    <li><a href="/bowling-alley-pos-system">Bowling Alley Point of Sale</a></li>
    <li><a href="/cafe-pos">Cafe Point of Sale Systems</a></li>
    <li><a href="/chinese-restaurant-pos">Chinese Restaurant POS Systems</a></li>
    <li><a href="/fine-dining-pos">Fine Dining Point of Sale Systems</a></li>
    ....
    ....

，我想向当前页面添加一个活动类，所以这就是我采取的方法

    <li><a href="/restaurant_pos"><span>Restaurant POS Systems</span></a>
<ul>
    <li><a <?php if($_SERVER['REQUEST_URI'] == '/restaurant_pos/'){
        echo "class='active' ";
    } 
    ?> href="/restaurant_pos">Restaurant POS Systems</a></li>
    <li><a 
        <?php if($_SERVER['REQUEST_URI'] == '/bar_nightclub_pos/'){
            echo "class='active' ";
        } 
        ?>
        href="/bar_nightclub_pos">Bar and Nightclub POS Systems</a></li>
    <li><a href="/bbq-restaurant-pos">BBQ Restaurant POS</a></li>
    <li><a href="/bowling-alley-pos-system">Bowling Alley Point of Sale</a></li>
    <li><a href="/cafe-pos">Cafe Point of Sale Systems</a></li>
    <li><a href="/chinese-restaurant-pos">Chinese Restaurant POS Systems</a></li>
    <li><a href="/fine-dining-pos">Fine Dining Point of Sale Systems</a></li>
    ....
    ....

，但我觉得必须有一个更好、更干净的方法来做到这一点......任何想法

Answer 1

当然，

1. 将所有链接及其文本放入一个数组中。

2. 然后迭代数组以进行输出。

3. 如果输出就像您知道的那样，没有活动的功能，您可以继续下一步。

4. 引入对当前映射链接的请求的检查，如果是，则将类添加到输出。

您已经使用迭代解决了您的问题。通过将数据放入可迭代（可循环）结构中，可以将相同的方法应用于相同的数据。不要重复代码，重复数据。希望这有帮助。

Answer 2

在 JavaScript/jQuery 中这可能更容易做到。将交互保持在客户端也将节省服务器请求（尽管这在负载较高的站点上可能更值得关注）。

像这样的事情 - 您可能需要根据站点的 URL 调整 url 数组位置：

jsfiddle: http://jsfiddle.net/g_thom/AXm6e/2/

var pathname = window.location.href;
var partsArray = pathname.split('/');
var url = '/' + partsArray[3];
var a_s = $('li a');
a_s.removeClass('active');
a_s.each(function () {
   if ($(this).attr('href') == url) {
       $(this).addClass('active');
   } 
}); 

Answer 3

在 foreach 循环中循环遍历数据数组

<?php
$links = array(
    array('/restaurant_pos','Restaurant POS Systems'),
    array('/bar_nightclub_pos/','Bar and Nightclub POS Systems')
);
foreach($links as $k => $v){
    if($_SERVER['REQUEST_URI'] == '/bar_nightclub_pos/'){ $class = ' class="active"'; } else { $class = ''; }
    echo '<li><a href="'.$v[0].'"'.$class.'>'.$v[1].'</a></li>';
};
?>

输出：

Answer 4

我会做这样的事情：

<?php
$restaurants = array(
    array('label' => 'Restaurant POS Systems', 'url' => '/restaurant_pos'),
    array('label' => 'Bar and Nightclub POS Systems', 'url' => '/bar_nightclub_pos'),
    ...
);

/*set active restaurant*/
foreach ($restaurants as &$r) {
    $r['active'] = ($_SERVER['REQUEST_URI'] == $r['url'])? 'active': '';
}
unset($r);
?>
<ul>
<?php foreach ($restaurants as $r) { ?>
    <li><a href="<?php echo $r['url']; ?>" class="<?php echo $r['active']; ?>"><?php echo $r['label']; ?></a></li>
<?php } ?>
</ul>

在生成 HTML 的代码部分中使用尽可能少的编程逻辑通常是一个好主意。