Форум Сайтостроение Веб-строительство

js display none добавить/удалить

D
На сайте с 28.06.2008
Offline
1104
Dram
414

Есть две таблицы с разными классами g2018 и g2019

Как сделать так чтобы при загрузке странницы была видна таблица с классом g2018, а g2019 в дисплей нон?

Далее юзер селектом над таблицей может выбрать 2019 год, то уже таблица g2018 уходит в дисплей нон, а 2019 появляется.

И обратно - выбрал 2018 год, 2019 пропал, появился 2018...

---------- Добавлено 10.05.2020 в 14:40 ----------

пробую так (завернул таблицы в дивы с ID) - не выходит

function Selected(a) {
var label = a.value;
if (label==2018) {
document.getElementById("2018").style.display='block';
document.getElementById("2019").style.display='none';
} else if (label==2019) {
document.getElementById("2018").style.display='none';
document.getElementById("2019").style.display='block';
} else {
document.getElementById("2018").style.display='block';
document.getElementById("2019").style.display='none';
}
}




<select onchange="toggle_form_element(this)" name="parts" id="parts">
<option value="-">Выберите год</option>
<option value="2018">2018</option>
<option value="2019">2019</option>

</select>
<div id="2018">таблица 2018
</div>
<div id="2019">таблица 2019
</div>



---------- Добавлено 10.05.2020 в 14:47 ----------

спасибо всем ))) как обычно справился сам - дело было в onChange="Selected(this)"

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#1
Dram:
пробую так (завернул таблицы в дивы с ID) - не выходит

Есть хорошая(?) привычка id начинать с буквы. В HTML5 это значения не имеет, но кто знает, что там у Вас вверху..

Dram:
function Selected(a) {

А она вообще где-нибудь вызывается?

Dram:
onchange="toggle_form_element(this)" name="parts" id="parts">



---------- Добавлено 10.05.2020 в 14:53 ----------

А вообще для "чистоты" кода можно добавить к каждому div-у класс и вместо кучи if-ов и перебора числовых значений года что-то вроде такого сделать. (ведь если добавится 2020, 2021, то код придётся корректировать, да и подрастёт значительно).. 

<div class="year_table" id="y2018"></div>

<div class="year_table" id="y2019"></div>

...

$('#parts').change(function(){

  $('.year_table').css('display','none');

  $('#'+$(this).val()).css('display','block');

})
... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
dma84
На сайте с 21.04.2009
Offline
168
dma84
#2 


  $('.year_table').css('display','none');
  $('#'+$(this).val()).css('display','block');

Чем .show() и .hide() не устраивают? Зачем такой огород городить?

S
На сайте с 30.09.2016
Offline
469
Sitealert
#3

Всё равно в конечном итоге одинаково сработает. Через .css более явное присваивание стилей, наверное.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
LEOnidUKG
На сайте с 25.11.2006
Offline
1745
LEOnidUKG
#4
dma84:

  $('.year_table').css('display','none');

  $('#'+$(this).val()).css('display','block');


Чем .show() и .hide() не устраивают? Зачем такой огород городить?

В данном случаи, да это не имеет смысла.

Если юзаются другие свойства, а не только block то лучше через стили.

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/ ✅ Настройка и оптимизация серверов https://getmanyspeed.ru/
Z0
На сайте с 03.09.2009
Offline
777
ziliboba0213
#5
dma84:

  $('.year_table').css('display','none');

  $('#'+$(this).val()).css('display','block');


Чем .show() и .hide() не устраивают? Зачем такой огород городить?

Я если у меня display:table? :p

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#6
ziliboba0213:
Я если у меня display:table?

Ну, так и пиши, что display:table ))

Пришёл тут умничать )))

Зачем ТС-у для <div display:table? ))

Если очень надо - табличку внутрь вставит )))

Z0
На сайте с 03.09.2009
Offline
777
ziliboba0213
#7
ivan-lev:
Ну, так и пиши, что display:table ))
Пришёл тут умничать )))

Зачем ТС-у для <div display:table? ))
Если очень надо - табличку внутрь вставит )))

А если у меня (прости Господи), inline-block? 🤣

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий