Page History

.aui-tabs<style>
    .aui-tab {
    background-color: #f0f0f0; /* Default color */
}
.aui-tabs .aui-tab[data-tab="IT Staff"] {
    background-color: #4CAF50; /* Green for IT Staff */
}
.aui-tabs .aui-tab[data-tab="IT Manager"] {
    background-color: #2196F3; /* Blue for IT Manager */
}
.aui-tabs .aui-tab[data-tab="General Employee"] {
    background-color: #FF9800; /* Orange for General Employee */
}    display: inline-block;
        padding: 10px 20px;
        cursor: pointer;
        color: white;
        border-radius: 5px;
        margin-right: 5px;
    }
    .tab-it-staff { background-color: #4CAF50; }
    .tab-it-manager { background-color: #2196F3; }
    .tab-general-employee { background-color: #FF9800; }
    .tab-default { background-color: #f0f0f0; }
    .content { display: none; }
    .active { display: block; }
</style>

<div>
    <div class="tab tab-it-staff" onclick="showContent('it-staff')">IT Staff</div>
    <div class="tab tab-it-manager" onclick="showContent('it-manager')">IT Manager</div>
    <div class="tab tab-general-employee" onclick="showContent('general-employee')">General Employee</div>
</div>

<div id="it-staff" class="content active">
    <p>Policy Provision for IT Staff.</p>
</div>
<div id="it-manager" class="content">
    <p>Policy Provision for IT Managers.</p>
</div>
<div id="general-employee" class="content">
    <p>Policy Provision for General Employees.</p>
</div>

<script>
    function showContent(tabId) {
        var contents = document.querySelectorAll('.content');
        contents.forEach(function(content) {
            content.classList.remove('active');
        });
        document.getElementById(tabId).classList.add('active');
    }
</script>