[Solved] Adding “active” class/id to table style navigation based on url

Question

*first of all, you don’t build menu with <table>. if you need regular menu (not drop down menu) you can use for example:

HTML:

<div class="MenuTable">
    <a href="http://www.partsmasterusa.com/"><i class="fa fa-plus-square"></i> Main</a>
    <a href="http://www.partsmasterusa.com/about/"><i class="fa fa-building"></i> About</a>
    <a href="http://www.partsmasterusa.com/part-inquiry/"><i class="fa fa-info-circle"></i> Part Inquiry</a>
    <a href="http://www.partsmasterusa.com/search/"><i class="fa fa-search"></i> Search</a>
    <a href="http://www.partsmasterusa.com/cart/"><i class="fa fa-shopping-cart"></i> Cart</a>
    <a href="http://www.partsmasterusa.com/checkout/"><i class="fa fa-credit-card"></i> Checkout</a>
    <a href="http://www.partsmasterusa.com/my-account/"><i class="fa fa-user"></i> My Account</a>
    <a href="<!-- some form page (open it with ajax) -->"><i class="fa fa-power-off"></i>  <?php wp_loginout(); ?></a>
</div>

CSS:

.MenuTable
{
    display: table;
    width: 100%;
}

.MenuTable a
{
    display: table-cell;
    height: 34px;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    color: #000;
    border-color: #000;
    border-style: solid;
    border-width: 1px 1px 1px 0px;  
}

.MenuTable a:first-child
{
    border-width: 1px 1px 1px 1px;  
}

.MenuTable a:hover, .MenuTable a.current
{
    background: rgb(155, 35, 35);
    color: #fff;
}

*if i get you right (by the screenshot), you are trying to select the current page link and give it other style, if so, an easy way is to use JQuery:

$(document).ready(function(){ // after the DOM has loaded
    var CurrentPage = location.href; // get the url of the current page
    $('.MenuTable a').each(function(){ // get each of 'MenuTable a' elements
        var ThisHref = $(this).attr('href'); // get each 'href' attribute value of every 'MenuTable a' element
        if (CurrentPage == ThisHref){ // if current page url equals to this 'MenuTable a' element's href attribute
            $(this).addClass('current'); // add class current to this 'MenuTable a' element
        }
    });        
});

example: http://jsfiddle.net/0ym4nm6y/

*i gave you a solution for your HTML hard code, if you build the menu with PHP Loop, show me the Loop and i will try to help you get the current page with PHP.

Accepted Answer