timbas
@timbas

Сократить код в js появление/скрытие элементов?

Уважаемые, есть код, который скрывает и показывает div с текстом по центру страницы. Не силен совсем в js поэтому написал так. Но полюбому можно задать чтобы скрывать все остальное а одно показывать.
Но больший вопрос в другом: Как мне отобразить по клику на "див или a" на другой странице, информацию в этом диве.

По другом говоря: Есть блок на главной странице с услугами. При нажатии на него хочется сделать чтобы отображалась информация на другой странице в назначеном диве. Кто заинтересуется помочь, буду признателен покажу код
function showDiv() {

document.getElementById('fundament__block').style.opacity = "1";
document.getElementById('stena__block').style.opacity = "0";
document.getElementById('krovlia__block').style.opacity = "0";
document.getElementById('vnesh_otdel__block').style.opacity = "0";
document.getElementById('vnut_otdel__block').style.opacity = "0";
document.getElementById('commun__block').style.opacity = "0";
document.getElementById('about_uslugy__block').style.opacity = "0";
}    

function showDiv1() {

document.getElementById('fundament__block').style.opacity = "0";
document.getElementById('stena__block').style.opacity = "1";
document.getElementById('krovlia__block').style.opacity = "0";
document.getElementById('vnesh_otdel__block').style.opacity = "0";
document.getElementById('vnut_otdel__block').style.opacity = "0";
document.getElementById('commun__block').style.opacity = "0";
document.getElementById('about_uslugy__block').style.opacity = "0";
}       

function showDiv2() {

document.getElementById('fundament__block').style.opacity = "0";
document.getElementById('stena__block').style.opacity = "0";
document.getElementById('krovlia__block').style.opacity = "1";
document.getElementById('vnesh_otdel__block').style.opacity = "0";
document.getElementById('vnut_otdel__block').style.opacity = "0";
document.getElementById('commun__block').style.opacity = "0";
document.getElementById('about_uslugy__block').style.opacity = "0";
}      

function showDiv3() {

document.getElementById('fundament__block').style.opacity = "0";
document.getElementById('stena__block').style.opacity = "0";
document.getElementById('krovlia__block').style.opacity = "0";
document.getElementById('vnesh_otdel__block').style.opacity = "1";
document.getElementById('vnut_otdel__block').style.opacity = "0";
document.getElementById('commun__block').style.opacity = "0";
document.getElementById('about_uslugy__block').style.opacity = "0";
}     

function showDiv4() {

document.getElementById('fundament__block').style.opacity = "0";
document.getElementById('stena__block').style.opacity = "0";
document.getElementById('krovlia__block').style.opacity = "0";
document.getElementById('vnesh_otdel__block').style.opacity = "0";
document.getElementById('vnut_otdel__block').style.opacity = "1";
document.getElementById('commun__block').style.opacity = "0";
document.getElementById('about_uslugy__block').style.opacity = "0";
}      

function showDiv5() {

document.getElementById('fundament__block').style.opacity = "0";
document.getElementById('stena__block').style.opacity = "0";
document.getElementById('krovlia__block').style.opacity = "0";
document.getElementById('vnesh_otdel__block').style.opacity = "0";
document.getElementById('vnut_otdel__block').style.opacity = "0";
document.getElementById('commun__block').style.opacity = "1";
document.getElementById('about_uslugy__block').style.opacity = "0";
}
  • Вопрос задан
  • 116 просмотров
Пригласить эксперта
Ответы на вопрос 3
@NNn131
Но полюбому можно задать чтобы скрывать все остальное а одно показывать.

Мб так?
//все твои блоки
let divs = [
        document.getElementById("{{div1}}"),
        document.getElementById("{{div2}}"),
        ...
    ];
//показать блок по номеру, остальные скрыть
function ShowDiv(index) {
    for (let div of divs) {
        div.style.opacity = "0";
    }
    divs[index].style.opacity = "1";
}
Ответ написан
@YahorDanchanka
Frontend developer
Html:
<div id="fundament__block" class="block">1</div>
<div id="stena__block" class="block">2</div>
<div id="krovlia__block" class="block">3</div>
<div id="vnesh_otdel__block" class="block">4</div>
<div id="vnut_otdel__block" class="block">5</div>
<div id="commun__block" class="block">6</div>
<div id="about_uslugy__block" class="block">7</div>


JS:
function showBlock(id) {
  const blocks = document.querySelectorAll('.block');
  blocks.forEach(block => {
    block.style.opacity = '0';
  });
  const block = document.querySelector(`#${id}`);
  block.style.opacity = '1';
}

showBlock('vnesh_otdel__block');
Ответ написан
sergiks
@sergiks Куратор тега JavaScript
♬♬
const blocks = [
  'fundament',
  'stena',
  'krovlia',
  'vnesh_otdel',
  'vnut_otdel',
  'commun',
  'about_uslugy',
];

const lsKey = 'block';

// вызывать showDiv('fundament')
const showDiv = (id) => {
  if (!blocks.includes(id)) return;

  // запомнить выбор в localStorage
  localStorage.setItem(lsKey, id);

  render();
}

// отрисовывает блок из LS
const render = () => {
  const id = localStorage.getItem(lsKey) || blocks[0]; // по умолчанию первый

  blocks.forEach((b) => document.getElementById(b + '__block')
    .style.visibility = b === id ? 'visible' : 'hidden'
  );
}


render(); // при загрузке страницы отобразить какой-то один
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы