Как проще реализовать код
такой код
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'; } можно ли его записать как то проще? |
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> Второй недописал |
Можно. Но по хорошему и html поправить не помешало бы. Скорее всего лишние id'шники и элементы используются.
Цитата:
В готовом 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 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> |
Тут смысл в том, что когда я нажимаю на кнопку cb1() поле 2 скрывается, и вместо него появляется поле 1. по умолчанию поле 1 скрыто. Вообще это переключение между поисками по сайту и магазину, с подкраской активного.
Мне интересно - можно ли, к этой кнопке, корректно прикрутить переключение класса стиля.. |
<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> |
Aetae,
Нет шобы радовацо - что учит молодую поросль, воть всё бы ругацо да фейси - пальмить! В Вашем решении есть и минусы - посколь чел не показывает что было при дефолтном положении вещей... возможны варианты - когда часть установок могут иметь характеристики из первой и второй серии :write: Лепше своять двухстрочную функцию установки класса и задать массив на вход, нежели жертвовать независимой установкой каждого элемента |
Он просил сократить код, а вы его увелиили. Причём абсолютно бессмыслено и крайне некрасиво. Каждый раз, как на него смотрю, пальма сама к фейсу тянется.
|
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> |
Часовой пояс GMT +3, время: 15:45. |