利用table+css實作導覽列

預設：

點選List後：

點選Tag後：

HTML

<table class='Task-Plan-Navigator overflow-hidden clean-region-table fullwidth'>
    <tbody>
        <tr>
            <td class='Task-Plan-Navigator-Tag Task-Plan-Navigator-Item'>
                Tag
            </td>
            <td class='Task-Plan-Navigator-Planning Task-Plan-Navigator-Item'>
                List
            </td>
            <td class='Task-Plan-Navigator-Schedule Task-Plan-Navigator-Item Task-Plan-Navigator-Active-Item'>
                Schedule Only
            </td>
        </tr>
    </tbody>
</table>

CSS

.fullwidth /* 100%寬度 */
{
    width: 100%;
}

.clean-region-table, 
.clean-region-table tbody, 
.clean-region-table tbody tr, 
.clean-region-table tbody tr td, 
.clean-region-table thead, 
.clean-region-table thead tr, 
.clean-region-table thead tr td
{
    border: 0;
    padding: 0;
    margin: 0;
}

.overflow-hidden
{
    /* 關閉overflow */
    overflow: hidden !important;
}

.Task-Plan-Navigator
{
    border: 2px #aaaaff;
    height: 120%;
    margin: 5px;
}

.Task-Plan-Navigator-Item
{
    width: 160px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 100%;
    cursor: pointer;
}

.Task-Plan-Navigator-Active-Item
{
    display: inline-block;
    background-image: none !important;
    cursor: default;
    width: auto !important;
}

.Task-Plan-Navigator-Tag
{
    background-color: #ccccFF;
    background-position: left center;
    background-image: url('../../../images/command/16x16/prev.png');
    background-repeat: no-repeat;
    padding-left:20px;
}

.Task-Plan-Navigator-Planning
{
    background-color: #ccFFcc;
    background-position: left center;
    background-image: url('../../../images/command/16x16/prev.png');
    background-repeat: no-repeat;
    padding-left:20px;
}
.Task-Plan-Navigator-Schedule
{
    background-color: #FFcccc;
    background-position: right center;
    background-image: url('../../../images/command/16x16/Next.png');
    background-repeat: no-repeat;
    padding-right:20px;
}

Javascript

$('.Task-Plan-Navigator-Item').click(function () {
    layoutByNavigationItem($(this));
});
function layoutByNavigationItem(currentItem) {
    $('.Task-Plan-Navigator-Item').removeClass('Task-Plan-Navigator-Active-Item');
    currentItem.addClass('Task-Plan-Navigator-Active-Item');
}
// init
layoutByNavigationItem($('.Task-Plan-Navigator-Active-Item'));

說明

利用Table允許其中一個td為一個動態寬度(width:auto;)的優點，預設Task-Plan-Navigator-Item都設計固定寬度，但是Task-Plan-Navigator-Active-Item則設計成補滿其餘寬度，因此只需要更換Active-Item即可達成效果。