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

Question

Артем @timbas

JavaScript

Сократить код в 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";
}

Вопрос задан более трёх лет назад
121 просмотр

5 комментариев

Подписаться 1 Простой 5 комментариев

Simkav @Simkav

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

Написано более трёх лет назад

Артем @timbas Автор вопроса

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>

Написано более трёх лет назад

Сергей Соколов @sergiks Куратор тега JavaScript

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

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

Написано более трёх лет назад

Артем @timbas Автор вопроса

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

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

<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 @edward_freedom

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

Написано более трёх лет назад

Если обе страницы находятся в одном домене, и вы хотите чтобы юзеры видели каждый свое то можно смотреть в сторону локал сторейджа, если общее для всех юзеров то тут только сокеты приходят в голову
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">• Монолитный <br>• Плитный<br>• Свайный<br>• Ленточный<br>• Винтовой<br>• Столбчатый<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">• Монолитный <br>• Плитный<br>• Свайный<br>• Ленточный<br>• Винтовой<br>• Столбчатый<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">• Монолитный <br>• Плитный<br>• Свайный<br>• Ленточный<br>• Винтовой<br>• Столбчатый<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">• Монолитный <br>• Плитный<br>• Свайный<br>• Ленточный<br>• Винтовой<br>• Столбчатый<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>
Артем, а зачем тебе что то менять, работает и норм

Answer 1 · 2021-07-25 11:55:33

Но полюбому можно задать чтобы скрывать все остальное а одно показывать.

Мб так?

//все твои блоки
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";
}

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

Войдите на сайт