Как перейти на новую вкладку начальной загрузки 4 на той же странице с помощью ссылки на боковой панели? - PullRequest
Новая
       21

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

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

Мне не удается получить ссылки на боковую панель для перехода к bootstrap 4 вкладкам на центральной странице с использованием этой техники . Вот javascript в моем _SidebarLayout.cshtml: 

<script>
    function selectTabNamedInUrlHash() {
        let selectedTab = window.location.hash;
        $('.nav-link[href="' + selectedTab + '"]').trigger('click');
    }

    jQuery(document).ready(function ($) {
        selectTabNamedInUrlHash();
    })
</script>

Боковая привязка привязывает к странице и добавляет фрагмент (ха sh) к href вкладки, к которой я хочу перейти ( конец URL: SPC # SpcFilm). Ссылка на боковую панель также вызывает вышеуказанную функцию. 

<a onclick="selectTabNamedInUrlHash();" asp-page="/SPC/Index" asp-fragment="SpcFilm">Film</a>

На Index.cs html вкладка Bootstrap 4 обозначена href="#SpcFilm" Это решение работает при переходе на новую страницу, но не работает при переходе на другую вкладку на той же странице.

1 Ответ

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

Я отвечаю на свой вопрос здесь с помощью сотрудника. Используйте событие hashchange современных браузеров (которое распознается jQuery), чтобы выбрать вкладку. В Bootstrap 4 вкладки активируются с помощью data-toggle="tab" или data-toggle="pill". Таким образом, необходим только один скрипт: 

<script>
    $(window).on('hashchange ready', function () {
        let selectedTab = window.location.hash;
        $('a[href="' + selectedTab + '"][data-toggle="tab"]').trigger('click');
    });
</script>

Каждая ссылка на боковой панели содержит га sh, соответствующий ссылке на нужную вкладку. При нажатии на ссылку боковой панели jQuery выше вызывает щелчок на вкладке, открывая вкладку на этой странице.

Примечание. Обязательно удалите onclick="selectTabNamedInUrlHash();" из ссылок на боковой панели и удалите соответствующую функцию как он больше не нужен и может помешать решению.

...