[Aetae]

<style type="text/css">
#s1.showFirst1 {display:none;}
#s2.showFirst1 {display:block;}
#ChangeBox2.showFirst1 {background: #F60; color: #FFF}
#ChangeBox1.showFirst1 {background: #FFF; color: #F60}

#s1.showFirst2 {display:block;}
#s2.showFirst2 {display:none;}
#ChangeBox2.showFirst2 {background: #FFF; color: #F60}
#ChangeBox1.showFirst2 {background: #F60; color: #FFF}
</style>


<script type="text/javascript">
function cb1(){
document.getElementById("s2").setAttribute('class', 'showFirst1');
document.getElementById("s1").setAttribute('class', 'showFirst1');

document.getElementById('ChangeBox2').setAttribute('class', 'showFirst1');
document.getElementById('ChangeBox1').setAttribute('class', 'showFirst1');
}

function cb2(){
document.getElementById("s2").setAttribute('class', 'showFirst2');
document.getElementById("s1").setAttribute('class', 'showFirst2');

document.getElementById('ChangeBox2').setAttribute('class', 'showFirst2');
document.getElementById('ChangeBox1').setAttribute('class', 'showFirst2');
}
</script>

<style type="text/css">
.showFirst #s1 {display:none;}
.showFirst #ChangeBox1{background: #F60; color: #FFF}
.showFirst #ChangeBox2{background: #FFF; color: #F60}
 
.showNext #s2 {display:none;}
.showNext #ChangeBox2{background: #F60; color: #FFF}
.showNext #ChangeBox1{background: #FFF; color: #F60}
</style>

<script type="text/javascript">
var parent = document.body; //желательно ближайший общий предок
function cb(){
    parent.className = parent.className === 'showNext' ?  'showFirst' :  'showNext';
}
</script>