Изменение одинакового содержимого страниц только на одной определенной

Тема в разделе "JavaScript", создана пользователем AlexGood, 2 ноя 2019.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    У меня есть несколько страниц на которых используется одно и тоже боковое и верхнее меню. Фон тоже разный на каждой странице - поэтому на body весят классы относительно страницы.
    Проблема моя в том: как одни и те же блоки (меню) которые дублируются на всех страницах выключить/включить только на одной определенной странице, на определенном разрешении (диапазоне разрешений) - не затронув их на остальных страницах?
    На сколько я понимаю, можно создать переменную и по классу body обратиться к странице и относительно этого делаем проверку - если это ЭТОТ body то на этом разрешении вкл/выкл блока иначе наоборот
    Либо еще как-то с url решается вопрос...

    Код:
    var myBody= document.getElementsByClassName('myBody')[0];
    var block1= document.getElementsByClassName('block1')[0];
    var block2= document.getElementsByClassName('block2')[0];
    
    
    function myfunc () {
        if (mybody && scrollX >= 1200) {
            block1.style.display = 'none';
            block2.style.display = 'none';
            else{
                block1.style.display = 'block';
                block2.style.display = 'block';
                }
            }
        }
    Либо навешивать классы и обратно чтобы еще все красиво с анимацией можно было сделать?
    Скажите как это правильно делается - я не на столько разбираюсь в js - хотя понимаю что это первый класс (
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Это делается через меди запросы (основы адаптивной вёрстки).

    Тогда всё элементарно: просто в медиа запросе добавляем этот клас и меню будет скрываться только на нужной странице.
     
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    хм... что-то меня такая мысль не посещала... т.е.

    <body class="my_body">
    <div class="my-menu">

    и при запросе будет вот так:
    @media only screen (max-width:1200px){
    .my_body>my-menu{
    display:none;
    }

    при сужении браузера... а если обратно растягиваешь браузер... ну т.е перевернул тефон на другое разрешении и чтобы все вернулось на свои места... то все тоже самое только при min-width: 1201px
    или это уже только js?
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Зачем?
    Если нужно скрывать меню при разрешениях до 1200, то предыдущее правило это и делает и никаких дополнительных не нужно.

    Тут точки перед my-menu не хватает и скобку использовать можно только, если меню прямой потомок body.
    И в медиа запросе не хватает and перед скобками с шириной.
     
    AlexGood нравится это.