Как сделать так, чтобы при клике на элемент меню появлялся нужный блок и исчезал ненужный?

Question

[Norum]

У меня есть список-меню .sidebar-menu и каждый li этого списка имеет свой id. Так же имеется блок .services-info, где находятся блоки, один из которых должен появляться при нажатии на один из пунктов в .sidebar-menu, который соответствует этому блоку . На блоки в .services-info я повесил класс .invisible, который их скрывает и есть класс .visible со свойством display: block.
Вопрос: Как сделать так, чтобы при нажатии на один из пунктов .sidebar-menu появлялся соответствующий блок и исчезал ненужный? Например, я нажал на пункт "Сайт-визитка" и в .services-info (обведен красным на картинке) появляется соответствующий блок (с классом .business-card) и пропадает предыдущий блок или я нажал на пункт "Интернет-магазин" и появляется так же соответствующий блок (с классом .market). и пропадает ненужный.

Сам сайт ct03638.tmweb.ru

Весь код jsfiddle.net/qhfs7jmb/

<section class="services" id="services">
            <div class="services-info-bg"></div>
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu">
                            <li id="business-card"><a href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>
                        <ul class="sidebar-nav">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="services-info">
                        <div class="content">
                            <div class="business-card invisible">Сайт-визитка</div>
                            <div class="landin invisible">Landing page</div>
                            <div class="market">
                                <div class="services-info-title">
                                    Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
                                </div>
                                <p>Что входит в нашу работу:</p>
                                <div class="services-info-block">
                                    <ul>
                                        <li>+ Подготовка технического задания</li>
                                        <li>+ Разработка прототипа</li>
                                        <li>+ Верстка макета</li>
                                        <li>+ Интеграция дизайна</li>
                                    </ul>
                                    <ul>
                                        <li>+ Написание уникальных текстов</li>
                                        <li>+ Сбор семантики</li>
                                        <li>+ Тестирование и запуск</li>
                                        <li>+ Подключение веб-аналитики</li>
                                    </ul>
                                </div>
                                <div class="services-info-footer">
                                    <a class="order" href="#">Сделать заказ</a>
                                    <a href="#" class="details">Узнать подробнее &rarr;</a>
                                </div>
                            </div>
                           
                        </div>
                    </div>
                </div>
            </div>
        </section>

.invisible{
    display:  none;
}


.visible {
    display: block;
}

Answer 1

[pLavrenov]

Раз уж начали советовать слайдеры то (имхо) лучший slick

По теме, процесс такой:
1) Избавляемся от invisible или от visible (делаем все блоки скрытыми и один видимый) зачем делать лишнюю работу и менять несколько классов если можно ставить один будет тоже самое, а еще переименовываем этот класс в .active
2) При нажатии на ссылку берем ее ID - .click()
3) Скрываем все дочерние блоки .content - .removeClass()
4) Открываем нужный блоки с классом == ID - .addClass()

пункт 3 и 4 можно объединить если использовать .toogle()

Comments

[Norum]

Я попробовал написать, как вы советовали, но в итоге у меня работает только

$('.sidebar-menu li').click(function(event) {
        var elemId = $(this).attr("id");
    });

и блоки я скрыл вот так, так как другого способа не знаю

.landing, .market {
    display: none;
}

И еще я не понимаю зачем скрывать другие блоки, если они уже скрыты и мне не понятно как открыть нужный блоки с классом == ID ?

Весь код вот jsfiddle.net/qhfs7jmb/

[pLavrenov]

Norum, первая часть правильно. Но...

Всю эту макаронину из однотипных toggleClass можно заменить на навешивание одного класса.
Например при клике на гамбургер сейчас делается 8 toggleClass а можно сделать 1 на боди. Например класс .menu-active (название для примера) а всю остальную магию сделают стили.

Пример

.menu {
    display: none;
} 
body.menu-active .menu {
   display: block;
}

Скрыть и показать блоки - это можно сделать как и в примере выше одним классом.

.block {
    display: none;
} 
.block.show {
   display: block;
}

И тогда при навешивании класса .show блок будет отображаться. При такой конструкции:

ul
   li
   li.show
   li
ul

Нужно сначала убрать все .show c li (removeClass) и сразу добавить .show нужному li

[pLavrenov]

$('.sidebar-menu li').click(function(event) {
    var id = $(this).attr("id");
    $('.sidebar-menu li').removeClass('show');
    $('#' + id + '-block').addClass('show');
});

Простой пример который по клику получает ID блока id="name" и скрывает все контентные но показывает один из них с id="name-block"

[Norum]

lavren, я перечитал и все равно не понял, что вы пытаетесь донести. Зачем скрывать li в .sidebar-menu, если мне нужно, чтобы по клику на li в блоке .services-info появлялся нужный мне блок? Получается тогда блоки в .services-info надо скрывать и только на один ставить класс .show? Давайте я еще раз обрисую ситуацию:

1)У меня есть ul .sidebar-menu в котором каждый li имеет свой id

<ul class="sidebar-menu">
                            <li id="business-card"><a id="suka" href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>

Он выглядит так


2) У меня есть блок .services-info, в котором находятся другие блоки. Чтобы скрыть эти блоки, которые находятся в .services-info я повесил им класс .hide{display: none;}, который скрывает эти блоки и класс .show {display: block;}, который отображает блоки, на которых висит этот класс

<div class="services-info">
                        <div class="content">
                            <div class="business-card show">Сайт-визитка</div>
                            <div class="landing hide">Landing page</div>
                            <div class="market hide">
                                <div class="services-info-title">
                                    Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
                                </div>
                                <p>Что входит в нашу работу:</p>
                                <div class="services-info-block">
                                    <ul>
                                        <li>+ Подготовка технического задания</li>
                                        <li>+ Разработка прототипа</li>
                                        <li>+ Верстка макета</li>
                                        <li>+ Интеграция дизайна</li>
                                    </ul>
                                    <ul>
                                        <li>+ Написание уникальных текстов</li>
                                        <li>+ Сбор семантики</li>
                                        <li>+ Тестирование и запуск</li>
                                        <li>+ Подключение веб-аналитики</li>
                                    </ul>
                                </div>
                                <div class="services-info-footer">
                                    <a class="order" href="#">Сделать заказ</a>
                                    <a href="#" class="details">Узнать подробнее &rarr;</a>
                                </div>
                            </div>
                           
                        </div>
                    </div>

.hide{
    display:  none;
}


.show{
    display: block;
}

Он выглядит так


ВОПРОС: Как сделать так, чтобы при нажатии на один из li в .sidebar-menu в блоке .services-info отображался ОДИН блок, который связан с li в .sidebar-menu. Например, я нажал на пункт "Сайт-визитка" у которого id="business-card" и в .services-info появляется соответствующий блок (с классом .business-card) и пропадает предыдущий блок или я нажал на пункт "Интернет-магазин" у которого id="market" и появляется так же соответствующий блок (с классом .market). и пропадает ненужный.

Я прописал вот такой код, где sublings() удаляет у соседних блоков класс hide, но в итоге это не работает

$('.sidebar-menu li').click(function(event) {
        var id = $(this).attr("id");
        $('.services-info .content > div').sublings().removeClass('hide');
        $('#' + id + 'div').addClass('show');
    });

[pLavrenov]

Norum, я не писал решение под конкретный код. Я показал направление решения. Да там надо скрывать не эти пункты (яснопонятно же). Сделайте за меня это на другую площадку.

$('.services-info .content > div').sublings().removeClass('hide');

$('.services-info .content > div') - это уже получает нужные блоки.
.sublings() - можно вырезать тк есть смысл его использовать только если есть привязка к конкретному классу ребенка или если дети разные типа div, a, img - работать будет и без него.