Смена вида краткой новости с помощью скрипта.

Смена вида на простом скрипте который добавляет клас по очереди три новых класа к блоку со всема новостями.

Код кнопок:

<div class="templater">
    <a href="#" data-tpl="tpl_main" class="current">Стандарт</a>
    <a href="#" data-tpl="tpl_list">Список</a>
    <a href="#" data-tpl="tpl_tile">Плитка</a>
</div>
<div class="container">
<div class="news-1">111</div>
<div class="news-1">222</div>
<div class="news-1">333</div>
</div>
=========
Описание:
После клика на кнопку "Список" контейнер с новостями получит клас tpl_list:
<div class="templater">
    <a href="#" data-tpl="tpl_main" class="current">Стандарт</a>
    <a href="#" data-tpl="tpl_list">Список</a>
    <a href="#" data-tpl="tpl_tile">Плитка</a>
</div>
<div class="container tpl_list">
<div class="news-1">111</div>
<div class="news-1">222</div>
<div class="news-1">333</div>
</div>

Код скрипта:

<script type="text/jаvascript">
function set_class(class_name,value,el) {
var arr = document.getElementsByClassName(class_name);
for(i=0;i<arr.length;i++) {arr[i].className = class_name+' '+value;}
var arr = document.getElementsByClassName('current');
for(i=0;i<arr.length;i++) {arr[i].className = '';}
el.className = 'current';
}
document.getElementsByClassName('templater')[0].getElementsByTagName('A')[0].setAttribute('onclick', 'set_class(\'container\',\'tpl_main\',this);');
document.getElementsByClassName('templater')[0].getElementsByTagName('A')[1].setAttribute('onclick', 'set_class(\'container\',\'tpl_list\',this);');
document.getElementsByClassName('templater')[0].getElementsByTagName('A')[2].setAttribute('onclick', 'set_class(\'container\',\'tpl_title\',this);');
</script>

Также ссылка на которой кликают получает клас - current.