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

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

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

Код кнопок:

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


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019