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

Question

[Артем]

Уважаемые, есть код, который скрывает и показывает 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";
}

Comments

[Simkav]

Если обе страницы находятся в одном домене, и вы хотите чтобы юзеры видели каждый свое то можно смотреть в сторону локал сторейджа, если общее для всех юзеров то тут только сокеты приходят в голову

[Артем]

Simkav, Есть блок на главной странице

<a href="pages/fundament.html" class="about__work1 slideInLeft wow">
            <img class="work__img" src="img/work1.jpg" alt="">
            <h2 class="about__text__img">Фундамент</h2>
            <h3 class="about__text__subtitle">&bull; Монолитный <br>&bull; Плитный<br>&bull; Свайный<br>&bull; Ленточный<br>&bull; Винтовой<br>&bull; Столбчатый<br>
             <span class="sub">Нажмите чтобы посмотреть</span></h3>
        </a>

Который переходит на страницу с услугами. Хотелось бы чтоб отображалась информация из этого showDiv. При клике на главной. Читаю уже документацию локал сторейджа битый час - непонимаю. в Js совсем вася

<a onclick="showDiv(document.getElementById('fundament__block'))" class="about__work1 work__left">
            <img class="work__img" src="../img/work1.jpg" alt="">
            <h2 class="about__text__img">Фундамент</h2>
            <h3 class="about__text__subtitle">&bull; Монолитный <br>&bull; Плитный<br>&bull; Свайный<br>&bull; Ленточный<br>&bull; Винтовой<br>&bull; Столбчатый<br>
             <span class="sub">Нажмите чтобы посмотреть</span></h3>
             <p class="name__block_left">Фундамент</p>
        </a>

[Сергей Соколов]

отображалась информация на другой странице в назначеном диве

Не понял: одновременно открыты две страницы? Или при клике идёт переход на другую страницу, где динамически нужно отобразить выбранный до этого контент? Как в нормальных SPA (одностраничниках) ?

[Артем]

Сергей Соколов, При клике переход на другую страницу и отображение информации в центре страницы

Главная страница:

<a href="pages/fundament.html" class="about__work1 slideInLeft wow">
            <img class="work__img" src="img/work1.jpg" alt="">
            <h2 class="about__text__img">Фундамент</h2>
            <h3 class="about__text__subtitle">&bull; Монолитный <br>&bull; Плитный<br>&bull; Свайный<br>&bull; Ленточный<br>&bull; Винтовой<br>&bull; Столбчатый<br>
             <span class="sub">Нажмите чтобы посмотреть</span></h3>
        </a>

Страница с услугами:

<a onclick="showDiv(document.getElementById('fundament__block'))" class="about__work1 work__left">
            <img class="work__img" src="../img/work1.jpg" alt="">
            <h2 class="about__text__img">Фундамент</h2>
            <h3 class="about__text__subtitle">&bull; Монолитный <br>&bull; Плитный<br>&bull; Свайный<br>&bull; Ленточный<br>&bull; Винтовой<br>&bull; Столбчатый<br>
             <span class="sub">Нажмите чтобы посмотреть</span></h3>
             <p class="name__block_left">Фундамент</p>
        </a>

<div id="fundament__block" class="fundament__block">
        <p class="title__uslugy">Фундамент</p>
        <p class="sub_title__uslugy">Это основной конструктивный элемент зданий и сооружений, воспринимающий все нагрузки</p>
        <p class="text__uslugy">От правильнос.</p>
</div>

[edward_freedom]

Артем, а зачем тебе что то менять, работает и норм

Answer 1

[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";
}

Answer 2

[Егор Данченко]

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');

Comments

[Артем]

Ввел ваш код тут. Он показывает его. Но как сделать это при клике. Еще раз повторюсь 0 в js, так бы за помощью не обратился
https://codepen.io/pen/

[Егор Данченко]

Артем, по какому элементу идёт клик?

[Егор Данченко]

Артем,

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

const stena__block = document.querySelector('#stena__block')
stena__block.addEventListener('click', () => {
  showBlock('krovlia__block');
});

Где

const stena__block = document.querySelector('#stena__block')

вставляйте любой селектор (#stena__block), и код будет работать

[Артем]

Вот элементы по которым клик

<a onclick="showDiv(document.getElementById('fundament__block'))" class="about__work1 work__left">
            <img class="work__img" src="../img/work1.jpg" alt="">
            <h2 class="about__text__img">Фундамент</h2>
            <h3 class="about__text__subtitle">&bull; Монолитный <br>&bull; Плитный<br>&bull; Свайный<br>&bull; Ленточный<br>&bull; Винтовой<br>&bull; Столбчатый<br>
             <span class="sub">Нажмите чтобы посмотреть</span></h3>
             <p class="name__block_left">Фундамент</p>
        </a>

        <a onclick="showDiv1(document.getElementById('stena__block'))" class="about__work2 work__right">
            <img class="work__img" src="../img/work2.jpg" alt="">
            <h2 class="about__text__img">Стены дома</h2>
            <h3 class="about__text__subtitle">&bull; Из кирпича <br>&bull; Из блоков<br>&bull; Деревянный сруб<br>&bull; Каркас<br>&bull; Брус<br>&bull; SIP панели<br><span class="sub">Нажмите чтобы посмотреть</span></h3>
            <p class="name__block_right">Стены дома</p>
        </a>

Вот элементы которые отображаются

<div id="fundament__block" class="fundament__block">
        <p class="title__uslugy">Фундамент</p>
        <p class="sub_title__uslugy">Это основной конструктивный элемент зданий и сооружений, воспринимающий все нагрузки</p>
        <p class="text__uslugy">От правильности </p>
    </div>
    <div id="stena__block" class="stena__block">
        <p class="title__uslugy">Стены</p>
        <p class="sub_title__uslugy">Возьмем на себя организацию всех работ пока вы будете заниматься делами</p>
        <p class="text__uslugy"> От правильности </p>
    </div>
    </div>

[Егор Данченко]

Артем, где

onclick="showDiv(document.getElementById('fundament__block'))"

вставляйте мою функцию showBlock().
Пример:

<a onclick="showBlock('fundament__block')" class="about__work1 work__left">
  <img class="work__img" src="../img/work1.jpg" alt="">
  <h2 class="about__text__img">Фундамент</h2>
  <h3 class="about__text__subtitle">&bull; Монолитный <br>&bull; Плитный<br>&bull; Свайный<br>&bull; Ленточный<br>&bull; Винтовой<br>&bull; Столбчатый<br>
    <span class="sub">Нажмите чтобы посмотреть</span>
  </h3>
  <p class="name__block_left">Фундамент</p>
</a>
<a onclick="showBlock('stena__block')" class="about__work2 work__right">
  <img class="work__img" src="../img/work2.jpg" alt="">
  <h2 class="about__text__img">Стены дома</h2>
  <h3 class="about__text__subtitle">&bull; Из кирпича <br>&bull; Из блоков<br>&bull; Деревянный сруб<br>&bull; Каркас<br>&bull; Брус<br>&bull; SIP панели<br><span class="sub">Нажмите чтобы посмотреть</span></h3>
  <p class="name__block_right">Стены дома</p>
</a>

<div id="fundament__block" class="fundament__block block">
  <p class="title__uslugy">Фундамент</p>
  <p class="sub_title__uslugy">Это основной конструктивный элемент зданий и сооружений, воспринимающий все нагрузки</p>
  <p class="text__uslugy">От правильности </p>
</div>
<div id="stena__block" class="stena__block block">
  <p class="title__uslugy">Стены</p>
  <p class="sub_title__uslugy">Возьмем на себя организацию всех работ пока вы будете заниматься делами</p>
  <p class="text__uslugy"> От правильности </p>
</div>

Не забудьте добавить класс block всем блокам

[WapSter]

Егор Данченко, зачем смешивать html и js?

[Егор Данченко]

WapSter, автор вопроса так прислал код. Я отправил так, чтобы ему было понятно. Как я понял, у него нет js файла и, следовательно, подключить этот файл будет тоже проблема (для автора).

[Егор Данченко]

Артем, помогло?

Answer 3

[Сергей Соколов]

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(); // при загрузке страницы отобразить какой-то один