Как проще реализовать код

[4el]

такой код

function cb1(){
document.getElementById("s1").style.display = "none";
document.getElementById("s2").style.display = "block";	
document.getElementById('ChangeBox1').style.cssText = 'background: #FF6600; color: #FFFFFF';
document.getElementById('ChangeBox2').style.cssText = 'background: #FFFFFF; color: #FF6600';


}

function cb2(){
document.getElementById("s2").style.display = "none";
document.getElementById("s1").style.display = "block";

document.getElementById('ChangeBox2').style.cssText = 'background: #FF6600; color: #FFFFFF';
document.getElementById('ChangeBox1').style.cssText = 'background: #FFFFFF; color: #FF6600';
}

можно ли его записать как то проще?

[Deff]

4el,
Мон создать два пустых элемента style c id и втыкать туда строку заготовленную строку css

<style id="Style-1"></style>
<style id="Style-2"></style>

<script type="text/javascript">
var a1='#s1{display:none}#s2{display:block}#ChangeBox1:content{background: #FF6600; color: #FFFFFF}'
document.getElementById("Style-1").innerHTML = a1
</script>

Второй недописал

[Aetae]

Можно. Но по хорошему и html поправить не помешало бы. Скорее всего лишние id'шники и элементы используются.

4el,
Мон создать два пустых элемента style c id и втыкать туда строку заготовленную строку css

You are doing it wrong.

В готовом 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}

[Deff]

В готовом css два класса, которые навешиваются родителю, примерно так но можно проще:

Согласен (сплю уже) - стандарная метода

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

[4el]

Тут смысл в том, что когда я нажимаю на кнопку cb1() поле 2 скрывается, и вместо него появляется поле 1. по умолчанию поле 1 скрыто. Вообще это переключение между поисками по сайту и магазину, с подкраской активного.

Мне интересно - можно ли, к этой кнопке, корректно прикрутить переключение класса стиля..

[Deff]

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

[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>

[Deff]

Aetae,
Нет шобы радовацо - что учит молодую поросль, воть всё бы ругацо да фейси - пальмить!

В Вашем решении есть и минусы - посколь чел не показывает что было при дефолтном положении вещей... возможны варианты - когда часть установок могут иметь характеристики из первой и второй серии
Лепше своять двухстрочную функцию установки класса и задать массив на вход, нежели жертвовать независимой установкой каждого элемента

[Aetae]

Он просил сократить код, а вы его увелиили. Причём абсолютно бессмыслено и крайне некрасиво. Каждый раз, как на него смотрю, пальма сама к фейсу тянется.

[Deff]

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">

var arrById='s2,s1,ChangeBox2,ChangeBox1';arrById = arrById.split(',');

function changClass(Class){
  for(var i in arrById) document.getElementById(arrById[i]).setAttribute('class',Class);
}

(function (){var a=0;
  toggleClass = function (){changClass('showFirst'+(1+a%2));a++;} 
  return toggleClass;
} () )

</script>