Question

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

Answer 1

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