@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/

60e4df305108b649053807.jpeg

<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;
}
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ответы на вопрос 3
bestowhope
@bestowhope
Печатает...
https://owlcarousel2.github.io/OwlCarousel2/

Спрашиваешь как сделать слайдер.
И если честно - ты циник. Ибо делаешь сайт своей "веб-студии".

Веб-студия по разработке сайтов которая не умеет делать сайты - Это сильно.
Я помню твой вопрос про "Картинка обрезается".
Ответ написан
LenovoId
@LenovoId
I want, women not to get sick
Примерно вот так: https://codepen.io/topicstarter/pen/mdmPreE
Ответ написан
@lavren
Раз уж начали советовать слайдеры то (имхо) лучший slick

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы