預設：
點選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即可達成效果。
