基于url将“active”类/ id添加到表格样式导航

Question

I have a table navigation for a WordPress site I am developing and I want the background of the cell to be a different color when the page is active.

How can I do this with php or js

<table class="MenuTable" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
    <tr>
        <td style="height:34px;" valign="middle" class="MenuItem" onClick="location.href='http://www.partsmasterusa.com/'"><i class="fa fa-plus-square"></i>  Main</td>
        <td style="height:34px;" valign="middle" class="MenuItem" onClick="location.href='http://www.partsmasterusa.com/about/'" ><i class="fa fa-building"></i>  About</td>
        <td style="height:34px;" valign="middle" class="MenuItem" onClick="location.href='http://www.partsmasterusa.com/part-inquiry/'" ><i class="fa fa-info-circle"></i>  Part Inquiry</td>
        <td style="height:34px;" valign="middle" class="MenuItem" onClick="location.href='http://www.partsmasterusa.com/search/'" ><i class="fa fa-search"></i> Search</td>

        <td style="height:34px;" valign="middle" class="MenuItem" onClick="location.href='http://www.partsmasterusa.com/cart/'" ><i class="fa fa-shopping-cart"></i>  Cart</td>
        <td style="height:34px;" valign="middle" class="MenuItem" onClick="location.href='http://www.partsmasterusa.com/checkout/'"><i class="fa fa-credit-card"></i>  Checkout</td>
        <td style="height:34px;" valign="middle" class="MenuItem" onClick="location.href='http://www.partsmasterusa.com/my-account/'" ><i class="fa fa-user"></i>  My Account</td>
        <td style="height:34px;" valign="middle" class="MenuItem" ><i class="fa fa-power-off"></i>  <?php wp_loginout(); ?></td>
    </tr>
</tbody>

What i looks like now:

What I want it to look like:

Answer 1

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