2

Нужна помощь! Ситуация такая, что есть боковое меню, с 4 пунктами и для каждого из них свой блок. Как мне реализовать, чтобы при клике из каких-нибудь этих пунктов, он выводил именно предназначенный для него блок, при этом, чтобы на странице менялся только блок? Вот мой код HTML. В примере указан только один блок предназначенный для первого пункта в списке. Помогите пожалуйста!

<div class="personal-area-form-card">
    <div class="row">
        <div class="col-md-11">
            <div class="row">
                <div class="col-md-3">
                    <div class="sidebar active blue">
                        <ul class="sidebar-user">
                            <li><a href="#" class="sidebar-menu active-menu">Персональные данные</a></li>
                            <li><a href="#" class="sidebar-menu">Управление тарифом</a></li>
                            <li><a href="#" class="sidebar-menu">История заказов</a></li>
                            <li><a href="#" class="sidebar-menu">Техническая поддержка</a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="form-personal-data">
                        <a class="target-face" href="#">Физическое лицо</a>
                        <a class="target-face blue" href="#">Юридическое лицо</a>

                        <form action="#" class="form-1" id="personal-data">
                            <fieldset form="personal-data">
                                <legend>Персональные данные</legend>
                                <input type="text"  name="user-name" value="Заполнить ФИО">
                                <input type="text"  name="user-login" value="Логин (изменить невозможно)">
                                <input type="text"  name="user-company" value="Заполнить наименование компании">
                                <input type="text"  name="user-position" value="Выбрать должность">
                                <input type="tel"   name="user-phone-number" value="Заполнить телефон">
                                <input type="email" name="user-email" value="Заполнить почту">
                                <button type="button" class="save-btn btn">Сохранить</button>
                            </fieldset>
                        </form>
                    </div>

                    <div class="form-password">
                        <form action="#" class="form-2" id="change-password">
                            <fieldset>
                                <legend>Сменить пароль</legend>
                                <input type="password" name="old-user-password" value="Введите старый пароль">
                                <input type="password" name="new-user-password" value="Введите новый пароль">
                                <input type="password" name="new-user-password-again" value="Подтвердите новый пароль">
                                <button type="button" class="save-btn btn">Сохранить</button>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>  

1 ответ 1

0

Попробуйте следующим образом (примеры https://www.w3schools.com/bootstrap/bootstrap_collapse.asp)

            <div class="sidebar active blue">
                        <ul class="sidebar-user">
                            <li><a data-toggle="tab" href="#first" class="sidebar-menu active-menu">Персональные данные</a></li>
                            <li><a data-toggle="tab" href="#second" class="sidebar-menu">...</a></li>
                            ...
                        </ul>
                    </div>
            </div>

            <div class="col-md-8 tab-content">
                <div id="#first" class="tab-pane form-personal-data fade in active">
                   ...
                </div>
                <div id="#second" class="tab-pane form-personal-data fade">
                   ...
                </div>
4
  • Спасибо вам ответ.
    – Илья
    15 авг 2018 в 13:38
  • Только у меня еще есть вопрос, что при этом прописать в CSS и JS?
    – Илья
    15 авг 2018 в 13:39
  • подключить bootstrap css и js...css судя по всему уже подключен, js нужно проверить 15 авг 2018 в 13:41
  • понял, спасибо большое.
    – Илья
    15 авг 2018 в 13:42

Ваш ответ

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

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