Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   При клике на кнопку менять дизайн (https://javascript.ru/forum/misc/56019-pri-klike-na-knopku-menyat-dizajjn.html)

djonA 25.05.2015 21:05

При клике на кнопку менять дизайн
 
Хочу сделать 2 кнопки и в зависимости от того какая нажата, выводить определенный дизайн.

Но сложность в том, что сделать что бы просто добавляло класс не получается. Так как дизайн надо изменить ощутимо.

Вот из чего что должно быть:
<table id="table" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">4</td>
<td rowspan="2">5</td>
</tr>
<tr>
<td width="19%">6</td>
<td width="41%">7</td>
</tr></table>
из этого в этот:

<div id="div">
<div>2</div>
<div>3</div>
<div>1</div>
<div>6</div>
<div>7</div>
<div>4</div>
<div>5</div>
</div>


Ну и кнопки
<input type="button" id="div1" onclick=""><input type="button" id="table1" onclick="">



Подскажите как лучше реализовать?

Leon-on12 25.05.2015 22:22

Напиши 2 страницы.
Одной ставь display:none а другой block;
<table id="table" width="100%" cellspacing="0" cellpadding="0" border="0" style="display:block">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">4</td>
<td rowspan="2">5</td>
</tr>
<tr>
<td width="19%">6</td>
<td width="41%">7</td>
</tr></table>

<div id="div" style="display:none">
<div>2</div>
<div>3</div>
<div>1</div>
<div>6</div>
<div>7</div>
<div>4</div>
<div>5</div>
</div>


Предлагаю тебе сделать одну кнопку под названием
<input value="Редизайн" type="button" id="button" onclick="reDesign();">


function reDesign(){
if (localStorage.getItem("design")==null || localStorage.getItem("design")==1){
localStorage.setItem("design", "2");
document.getElementById("table").style.display = "none";
document.getElementById("div").style.display = "block";
}
else{
localStorage.setItem("design", "1");
document.getElementById("table").style.display = "block";
document.getElementById("div").style.display = "none";
}

kostyanet 26.05.2015 18:45

Цитата:

Сообщение от djonA
Но сложность в том, что сделать что бы просто добавляло класс не получается.

Это противоречит концепции css. Одним доп-классом можно поменять все, что не потребует переверстки.

Что там у вас - таблица и ячейки? Для начала попробуйте нарисовать таблицу из дивов - чтобы понять как оно работает. Тогда как два пальца сможете превратить таблицу в блоки.

kostyanet 26.05.2015 18:59

А, понял, а при чем тут стили? У вас транспонирование массива, чистая переверстка. Ну попробуйте стилями саму таблицу транспонировать, то есть поменять местами строки и столбцы. А стилями - что делается стилями - меняется все что хочешь.

Без транспонирования все ячейки делаются блок и все. https://jsfiddle.net/9kc60hwn/


Часовой пояс GMT +3, время: 14:03.