1. JavaScript / Говнокод #26605

    0

    1. 01
    2. 02
    3. 03
    4. 04
    5. 05
    6. 06
    7. 07
    8. 08
    9. 09
    10. 10
    11. 11
    12. 12
    13. 13
    14. 14
    15. 15
    16. 16
    17. 17
    18. 18
    19. 19
    20. 20
    $('#spheres__street-nav').hover(function () {
                        $('.header-submenu__spheres-nav__item').removeClass('active');
                        $('.header-submenu__spheres-menu').removeClass('active');
                        $(this).addClass('active');
                        $('#spheres__street-content').addClass('active');
                    });
    
                    $('#spheres__sport-nav').hover(function () {
                        $('.header-submenu__spheres-nav__item').removeClass('active');
                        $('.header-submenu__spheres-menu').removeClass('active');
                        $(this).addClass('active');
                        $('#spheres__sport-content').addClass('active');
                    });
    
                    $('#spheres__prom-nav').hover(function () {
                        $('.header-submenu__spheres-nav__item').removeClass('active');
                        $('.header-submenu__spheres-menu').removeClass('active');
                        $(this).addClass('active');
                        $('#spheres__prom-content').addClass('active');
                    });

    Когда не можешь загуглить, как делаются табы

    Запостил: phpBidlokoder2, 27 Апреля 2020

    Комментарии (5) RSS

    • Такую архитектуру удобно расширять добавляя новые табы
      Ответить
      • Архитектура плохая. Какой-то непонятный .header-submenu__spheres-nav__item, какой-то непонятный .header-submenu__spheres-menu. Неявная питушня Где её искать?

        Вот это архитектура:
        $('#spheres__street-nav').hover(function () {
            $('#spheres__sport-nav').removeClass('active');
            $('#spheres__sport-content').removeClass('active');
            $('#spheres__prom-nav').removeClass('active');
            $('#spheres__prom-content').removeClass('active');
            $(this).addClass('active');
            $('#spheres__street-content').addClass('active');
        });
        
        $('#spheres__sport-nav').hover(function () {
            $('#spheres__street-nav').removeClass('active');
            $('#spheres__street-content').removeClass('active');
            $('#spheres__prom-nav').removeClass('active');
            $('#spheres__prom-content').removeClass('active');
            $(this).addClass('active');
            $('#spheres__sport-content').addClass('active');
        });
        
        $('#spheres__prom-nav').hover(function () {
            $('#spheres__street-nav').removeClass('active');
            $('#spheres__street-content').removeClass('active');
            $('#spheres__sport-nav').removeClass('active');
            $('#spheres__sport-content').removeClass('active');
            $(this).addClass('active');
            $('#spheres__prom-content').addClass('active');
        });
        Ответить
        • да, твой вариант еще более удобно расширять
          ты прав
          Ответить
          • И зарплата пропорциональна квадрату от количества пунктов в меню.
            Ответить
      • Ну да, особенно, если придется серверным рендерингом их выводить из базы. Либо хранить css классы в базе, либо генерить их на лету и генерить сам js код в пыхе
        Ответить

    Добавить комментарий