0

Подскажите, как правильно реализовать два "меню".

Первое меню

Первое меню находится в header и должно менять цвет в зависимости от положения на странице.

введите сюда описание изображения

Я решил реализовать это через отслеживания http://адрес/#... на сайте.

Вот так выглядит код:

HTML

    <div class="header">
        <div class="header__inner container">
            <div class="header__left">
                <a class="logo" data-menuanchor="intro" href="#intro">
                    <img class="logo__img" src="./img/logo.png" />
                </a>
                <div class="lang-wrap">
                    <div class="lang">
                        <button class="lang__btn" data-toggle="dropdown">Eng</button>
                        <div class="lang__body">
                            <a href="rus.html" class="lang__item">Rus</a>
                            <a href=""class="lang__item">Eng</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header__right">
                <button class="header-bars" data-toggle="dropdown">
                    <div class="header-bars__line header-bars__line_top"></div>
                    <div class="header-bars__line header-bars__line_middle"></div>
                    <div class="header-bars__line header-bars__line_bottom"></div>
                </button>
                <div class="header-menu">
                    <a class="header-menu__link" data-menuanchor="what-we-do" href="#whatWeDo" id="whatWeDo_2">
                        <div class="box_1"></div><div class="header-menu__text">What  do we do?</div>
                    </a>
                    <a class="header-menu__link" data-menuanchor="work-process" href="#workProcess" id="workProcess_2">
                        <div class="header-menu__text">The process of work</div>
                    </a>
                    <a class="header-menu__link" data-menuanchor="why-us" href="#whyUs" id="whyUs_2">
                        <div class="header-menu__text">Why should you choose us?</div>
                    </a>
                    <a class="header-menu__link" data-menuanchor="prices" href="#Prices" id="Prices_2">
                        <div class="header-menu__text">Price-list</div>
                    </a>
                    <a class="header-menu__link header-menu__link_order" data-menuanchor="order" href="#Order" id="Order_2">
                        <div class="header-menu__text">Make an order</div>
                    </a>
                </div>
            </div>
        </div>

JS

<script type="text/javascript">
        function showMessage() {
    document.getElementById('whatWeDo_2').style.color = '#fff';
    document.getElementById('workProcess_2').style.color = '#fff';
    document.getElementById('whyUs_2').style.color = '#fff';
    document.getElementById('Prices_2').style.color = '#fff';
    document.getElementById('Order_2').style.color = '#fff';

  }
</script>
<script type="text/javascript">
    window.onscroll = function() {
    var BlockName = document.body.className;
    var AllBlock = ["fp-viewing-Intro-0" , "fp-viewing-whatWeDo-0" , "fp-viewing-workProcess-0" , "fp-viewing-whyUs-0" , "fp-viewing-Prices-0" , "fp-viewing-Order-0","fp-viewing-Socials-0"];
    switch (BlockName) {
    case 'fp-viewing-Intro-0':
    showMessage();
    break;
    case 'fp-viewing-whatWeDo-0':
    showMessage();
    document.getElementById('whatWeDo_2').style.color = '#ffd8ff';
    break;
    case 'fp-viewing-workProcess-0':
    showMessage();
    document.getElementById('workProcess_2').style.color = '#ffd8ff';
    break;
    case 'fp-viewing-whyUs-0':
    showMessage();
    document.getElementById('whyUs_2').style.color = '#ffd8ff';
    break;
    case 'fp-viewing-Prices-0':
    showMessage();
    document.getElementById('Prices_2').style.color = '#ffd8ff';
    break;
    case 'fp-viewing-Order-0':
    showMessage();
    document.getElementById('Order_2').style.color = '#ffd8ff';
    break;
    case 'fp-viewing-Socials-0':
    showMessage();
    break;
    default:
}
    }
    </script>

Второе меню

Находиться на одном из слайдов и должно менять текст в окне рядом с ним. введите сюда описание изображения (Пример: при нажатии на Логотип, изменить содержимое окна(розового) на другой текст.)

Подскажите технически верную реализацию таких меню.

4
  • 3
    Второе меню - это типичные табы. "Правильная" - согласно каких правил вы ожидаете получить ответ?
    – user256824
    24 июл 2019 в 22:06
  • У вас showMessage() вроде нигде не вызывается даже... почему бы сразу в CSS не дописать .header-menu__link {color: white;} ? .onscroll функция тоже очень странная... где-то в другом месте есть кусок кода, меняющий класс body или он определяется при зарузке и не меняется? 24 июл 2019 в 22:16
  • @OPTIMUSPRIME Допустил ошибку когда писал вопрос(Исправил). Не дописал, .header-menu__link {color: white;} потому что нужно менять цвет всех остальных элементов на белый, когда один изменился на розовый. 25 июл 2019 в 3:02
  • @РустамГимранов Под правильным я подразумевал, наиболее распространенный вариант. 25 июл 2019 в 3:06

1 ответ 1

2

• type="text/javascript" можно не указывать... в браузерах оно и так по умолчанию стоит.

• Привыкайте к циклам for, forEach... Удобнее задать всем кнопкам один общий класс и привязать код к классу, чем по отдельности тыкать на ID каждой кнопки, а потом дописывать скрипт, если захочется добавить новую кнопку.

• Функции как правило называют так, чтобы не надо было смотреть на код - а по названию сразу стало понятно, что они делают. Ваш showMessage() мог выглядеть так:

function makeFontWhite( elems ){
  for( var i = 0; i < elems.length; i++ ){
    elems[i].style.color = 'white';
    // или
    // elems[i].classList.add('white'); — но тогда не забыть в CSS добавить этот класс.
  }
}

var link = document.querySelectorAll('.header-menu__link');

makeFontWhite( link );

Так будет универсальнее - можно вызвать её где-то в другом месте, для других кнопок.

• По поводу вашей функции onscroll... насколько понимаю, вы при клике на <a> достаёте #hash из адреса и даете body класс с этим названием. А потом хотите после скролла достать этот класс и по его значению достать другое id и его покрасить? Это выглядит как костыль для костыля из костылей))

Допустим такое решение тут и правда необходмо. Его можно было переписать так:

window.onscroll = function bubu() {
  var BlockName = (document.body.className.match(/fp-viewing-(.*?)-0/) || [0,0] )[1];
  // match возвращает массив совпадений. У него тут будет два элемента. Первый - всё совпадение целиком,
  //второй - то, что совпадет с условием в скобаках (.*?). Берем только его, с помощью [1]  
  if( bubu.prev == BlockName ){ return; } // Если класс не менялся - не делаем лишних вычислений

  makeFontWhite( link );
  var id = document.getElementById('fp-viewing-' + BlockName + '-2');
  if( id ){ // id Intro не существует, условие не выполнится и не будет ошибки.
    id.style.color = '#ffd8ff';
  }
  bubu.prev = BlockName;
}

(.*?) — вот этот кусок в регулярном выражении находит совпадение с любым (минимальным) набором символов, которое окажется между тем, что написано до и после скобок. Таким образом можно отбросить все одинаковые куски класса, и достать только то, что меняется... т.е. отдельно Intro, whatWeDo и т.п. И уже с ними дальше что-то делать.

(... || [0,0] )[1] — а этот кусок... Если match не найдет совпадений и вернет null, будет ошибка Cannot read property '1' of null. А в этом случае - он посмотрит на следующий массив [0,0] и достанет оттуда второй элемент, не будет ошибки.

P.s. Может я чего-то не знаю, но не уверен, что switch вообще где-либо может быть реально нужен. Можно использовать массивы и объекты, и не писать кучу переключений.


А по переключению вкладок вам дали ссылку в комментариях, не буду повторять его содержание)

4
  • Что делает (link) в данном случае? makeFontWhite(link); 25 июл 2019 в 13:49
  • 1
    @Дмитрий Николаевич link - это который var link = document.querySelectorAll('.header-menu__link'); — функция получает любую коллекцию элементов (может и getElementsByClassName, TagName и т.п.) — внутри перебирает его и всем дает белый шрифт. 25 июл 2019 в 14:56
  • Извините за еще один глупый вопрос, а откуда берется переменная bubu.pre? И почему переменная id всегда возвращает null; 25 июл 2019 в 20:59
  • 1
    @Дмитрий Николаевич функция названа bubu - в объекте самой функции можно объявлять свои переменные. Когда функция запускается, bubu.prev еще undefined - поэтому первое условие не выполнится. А в конце функции даём ему новое значение, = BlockName. На следующем круге, если класс body не изментся, условие bubu.prev === BlockName будет верным и функция будет прерываться. А id если возвращает null... у вас знаит где-то в другом месте косяк. Тут работает → jsfiddle.net/OPTlMUS/x6s3q2m7 25 июл 2019 в 23:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.