添加＆＃34;活跃＆＃34; class / id到基于url的表格样式导航

Question

我正在开发一个WordPress网站的表格导航，我希望当页面处于活动状态时，单元格的背景是不同的颜色。

我如何使用php或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>

我现在的样子：

我希望它看起来像：

Answer 1

*首先，您不使用<table>构建菜单。如果你需要常规菜单（不是下拉菜单），你可以使用例如：

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

*如果我找到你（通过屏幕截图），你试图选择当前页面链接并给它其他样式，如果是这样，一个简单的方法是使用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
        }
    });        
});

示例：http://jsfiddle.net/0ym4nm6y/

*我为您提供了HTML硬编码的解决方案，如果您使用PHP循环构建菜单，请向我展示循环，我将尝试帮助您使用PHP获取当前页面。