Bootstrap триггер навигации по вкладке - PullRequest
Новая
       14

Bootstrap триггер навигации по вкладке

0 голосов
/ 11 февраля 2020

У меня есть настройка навигации по вкладке Bootstrap для формы регистрации, чтобы пользователь мог вводить свои данные за раз, делая пользовательский интерфейс менее загроможденным. По умолчанию первая вкладка активна, остальные вкладки отключены, и после того, как пользователь правильно введет свои данные, он сможет перейти к следующей вкладке. Вот фрагмент кода 

<ul class="nav nav-pills mb-3 nav-fill" id="pills-tab" role="tablist">
        <li class="nav-item account-setup__nav">
            <a class="nav-link active" id="ProfileInfo-tab" data-toggle="pill" href="#ProfileInfo" role="tab" aria-controls="pills-ProfileInfo" aria-selected="true">1 Profile</a>
        </li>
        <li class="nav-item account-setup__nav">
            <a class="nav-link disabled" id="AboutMe-tab" data-toggle="pill" href="#AboutMe" role="tab" aria-controls="pills-AboutMe" aria-selected="false">2 About Me</a>
        </li>
   //other tabs
    </ul>
<div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="ProfileInfo" role="tabpanel" aria-labelledby="pills-home-tab">
    //form controll markup
    </div>

//button responisble for enabling 
<button id="btnNext_1" class="account-setup__btn-next btn btn-primary btn-lg"> Next</button>
<div class="tab-pane fade" id="AboutMe" role="tabpanel" aria-labelledby="pills-profile-tab">
          //more registration markup 
</div>
//other tabs
</div>

И компонент javascript выглядит следующим образом: 

var navPillsArray = document.querySelectorAll(".account-setup__nav .nav-link");
        $(".account-setup__btn-next").on("click", function (e) {
            e.preventDefault();
            var indexOfTab = e.target.id.split("_")[1];
        if (isValidInput) {
            navPillsArray[indexOfTab].classList.remove("disabled");
            //navigate to next tab
        }
});

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

Редактировать 1

Мое текущее решение для изменения вкладок вне кнопок вкладок вверху состоит в следующем: 

var navPillsArray = document.querySelectorAll(".account-setup__nav .nav-link");

function navToTap(i) {// i = index of tab
            var currentTab = document.querySelector(navPillsArray[i-1].getAttribute("href"));
            var nextTab = document.querySelector(navPillsArray[i].getAttribute("href"));

            console.log(currentTab);
            currentTab.classList.remove("active");
            currentTab.classList.remove("show");

            nextTab.classList.add("active");
            nextTab.classList.add("show");

            navPillsArray[i - 1].classList.remove("active")
            navPillsArray[i].classList.add("active")
            navPillsArray[i - 1].setAttribute("aria-selected", false);
            navPillsArray[i].setAttribute("aria-selected", true);
        }

        $(".account-setup__btn-next").on("click", function (e) {
            e.preventDefault();
            var indexOfTab = e.target.id.split("_")[1]-0;
            navPillsArray[indexOfTab].classList.remove("disabled");
            navToTap(indexOfTab);
        });

Решение работает, но должно быть что-то лучше, чем это.

...