Is there a cleaner way to do the sidebar active state per page?

I have this sidebar code

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

ans I want to add an active class to the current page, so this is the approach i took

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

But i feel there has got to be a better and cleaner way to do this...any ideas

Sure,

1. put all the links and their texts inside an array.

2. Then iterate over the array to do the output.

3. If the output is like you know it w/o the active functionality, you can continue with the next step.

4. Introduce the checking for the current request mapping a link and if it does, add the class to the output.

You've solved your problem using iteration. The same method is applied to the same data, by putting the data into an iterate-able (loopable) structure. Don't repeat the code, repeat the data. Hope this helps.

This might be easier to do in JavaScript/jQuery. Keeping the interaction client-side will save on server requests, too (though this may be more of a concern on sites with higher loads).

Something like this - you may have to adjust the url array position based on your site's 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');
   } 
}); 

Loop through data array in foreach loop

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

Outputs:

I would do something like this:

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

It is generally a good idea to have as little programming logic as possible in the part of the code that generates the HTML.