0

Интересует такой вопрос, как можно упростить данный скрипт? Учитывая то, что он будет еще больше так как хешей еще 3 штуки, каким образом можно сократить его, сделать более мобильным? Заранее благодарен.

$(window).bind('hashchange', function () {
    if (window.location.hash == '#home') {
        $('.topnav').css('background-color', '#341f76').css('color', '#000');
        $('.bottomnav').css('background-color', '#341f76').css('color', '#000');
        $('section.nav div.topnav ul.right a.cta').css('background-color', '#522bcb').css('color', '#fff');
        $('section.nav div.bottomnav ul li a').css('color', '#fff');
        $('section.nav div.topnav h1').css('color', '#fff');
        $('section.nav div.topnav ul li i').css('color', '#fff');
        $('section.nav div.topnav ul.right a.phone').css('color', '#fff');
        $("section.nav div.bottomnav ul li a").removeClass("active");
        $('.menu1').addClass('active');
    }
    if (window.location.hash == '#about') {
        $('.topnav').css('background-color', '#ffa201').css('color', '#000');
        $('.bottomnav').css('background-color', '#ffa201').css('color', '#000');
        $('section.nav div.topnav ul.right a.cta').css('background-color', '#ffcc01').css('color', '#151515');
        $("section.nav div.bottomnav ul li a").removeClass("active");
        $('.menu2').addClass('active');
    }
    if (window.location.hash == '#services') {
        $('.topnav').css('background-color', '#354761').css('color', '#fff');
        $('.bottomnav').css('background-color', '#354761').css('color', '#fff');
        $('section.nav div.topnav ul.right a.cta').css('background-color', '#4d6680').css('color', '#fff');
        $('section.nav div.bottomnav ul li a').css('color', '#fff');
        $('section.nav div.topnav h1').css('color', '#eee');
        $('section.nav div.topnav ul li i').css('color', '#eee');
        $('section.nav div.topnav ul.right a.phone').css('color', '#eee');
        $("section.nav div.bottomnav ul li a").removeClass("active");
        $('.menu3').addClass('active');
    }
});
2
  • 2
    Мне кажется, что в CSS нужно стили навешать, а не jq
    – eldario
    20 ноя 2017 в 13:29
  • меняйте в зависимоти от хэша класс в каком нибудь узле верхнего уровня. а остальное все в css выносите.
    – teran
    20 ноя 2017 в 13:53

1 ответ 1

0

Я бы рекомендовал

  1. Вместо .menu1, .menu2, .menu3 как раз и называть классы также, как в хэшах. Или добавлять постфикс. Например .home_page, .about_page, .services_page.

  2. removeClass('active') - всегда повторяется, значит его можно вынести в самый верх

  3. Все добавления стилей вынести в CSS, где они будут опираться на класс active верхнего узла - родителя. Т.е. когда у родителя появляется класс active, то применяются все стили.

В итоге после соблюдения трех пунктов код упростится до:

$(window).bind('hashchange', function () {
    let hash = window.location.href.split('#')[1];

    $("section.nav div.bottomnav ul li a").removeClass("active");
    $('.' + hash + '_page').addClass('active');
});

Ваш ответ

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

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