Bootstrap - переход на определенную вкладку по гиперссылке

Я использую вкладки Boostrap 4 Navbar https://getbootstrap.com/docs/4.4/components/navs/#javascript-behavior и вам нужно перейти на определенную вкладку на другой странице:

<div class="container">
    <div class="row">
        <a href="https://example.com/services#nav-tab-1">
            <img src="https://example.com/wp-content/uploads/icons/icon-1.svg">
        </a>

        <a href="https://example.com/services#nav-tab-2">
            <img src="https://example.com/wp-content/uploads/icons/icon-2.svg">
        </a>

        <a href="https://example.com/services#nav-tab-3">
            <img src="https://example.com/wp-content/uploads/icons/icon-3.svg">
        </a>                            
    </div>
</div>

На второй странице мне нужно, чтобы после загрузки страницы вызывалась та же ссылка на вкладку навигации:

<div class="container">
    <div id="nav-tab" class="row nav">
        <div id="nav-tab-1" class="col-4 wow fadeInUp nav-item nav-link active" data-toggle="tab" href="#tab-1" role="tab" aria-controls="nav-1" aria-selected="true">
            <img src="https://example.com/wp-content/uploads/icons/icon-1.svg">
        </div>
        <div id="nav-tab-2" class="col-4 wow fadeInUp delay-1 nav-item nav-link" data-toggle="tab" href="#tab-2" role="tab" aria-controls="nav-2" aria-selected="false">
            <img src="https://example.com/wp-content/uploads/icons/icon-2.svg">
        </div>
        <div id="nav-tab-3" class="col-4 wow fadeInUp delay-3 nav-item nav-link" data-toggle="tab" href="#tab-3" role="tab" aria-controls="nav-3" aria-selected="false">
            <img src="https://example.com/wp-content/uploads/icons/icon-3.svg">
        </div>
    </div>

    <div class="row">
        <div id="nav-tabContent" class="col-12 col-sm-7 tab-content">
            <div id="tab-1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="nav-home-tab">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum justo eros, aliquet et maximus at, tempus ut risus. In aliquet nulla massa, a hendrerit nisi volutpat vitae.
            </div>

            <div id="tab-2" class="tab-pane fade" role="tabpanel" aria-labelledby="nav-home-tab">
                Nullam sapien nibh, ornare ac arcu eget, ultrices lobortis tellus. Cras sodales dictum lorem id luctus.
            </div>

            <div id="tab-3" class="tab-pane fade" role="tabpanel" aria-labelledby="nav-home-tab">
                Nullam mi ligula, tempor at nulla in, malesuada vestibulum leo. Ut eget tristique quam. Donec rhoncus placerat molestie. 
            </div>
        </div>
    </div>
</div>

Каждая иконка с гиперссылкой (фрагмент кода №1) представляет собой одну из трех вкладок на второй странице. Когда пользователь нажимает на любой значок с гиперссылкой (фрагмент кода № 1) на первой странице, он должен перейти на следующую страницу и открыть соответствующую вкладку.


person Juraj    schedule 19.01.2020    source источник
comment
Теперь убедитесь, что вам нужен полный URL-адрес, попробуйте href="#nav-tab-1"   -  person Carsten Løvbo Andersen    schedule 19.01.2020
comment
Спасибо за ответ, пробовал, не работает...   -  person Juraj    schedule 19.01.2020
comment
не могли бы вы уточнить свой вопрос? Когда нужно перейти на определенную вкладку на другой странице, откуда и как? мне совершенно непонятно.   -  person pixelquadrat    schedule 19.01.2020
comment
Каждая иконка с гиперссылкой (фрагмент кода №1) представляет собой одну из трех вкладок на второй странице. Когда пользователь нажимает на любой значок с гиперссылкой (фрагмент кода № 1) на первой странице, он должен перейти на следующую страницу и открыть соответствующую вкладку. Еще лучше, если страница будет прокручиваться до целого раздела :)   -  person Juraj    schedule 19.01.2020


Ответы (1)


Используйте jquery для добавления и удаления класса активации на необходимой вкладке, или вы можете стимулировать функциональность щелчка.

person Shashank Gupta    schedule 19.01.2020