Bootstrap - ссылка для прокрутки и открытия конкретной вкладки - PullRequest
Новая
       32

Bootstrap - ссылка для прокрутки и открытия конкретной вкладки

0 голосов
/ 14 сентября 2018

У меня есть ссылка вверху страницы: 

<a data-toggle="tab" href="https://mysite.pl/#tabs3-k_tab3" class="blur-button">Zobacz promocje</a>

Я хочу, чтобы эта ссылка прокрутила до определенного раздела на той же странице (раздел с вкладками - это целевая страница) - и открыла конкретную вкладку(по id - думаю) - без перезагрузки страницы.У меня есть четыре вкладки с изображениями в качестве ссылок.

    <div class="container-fluid">
        <div class="row tabcont">
            <ul class="nav nav-tabs pt-3 mt-5" role="tablist">

<li class="nav-item mbr-fonts-style" ><a class="nav-link show display-7" id="arabica" role="tab" data-toggle="tab" href="#tabs3-n_tab0" aria-selected="true" >
<img src="assets/images/image.png" />
</a></li>

<li class="nav-item mbr-fonts-style" ><a class="nav-link id="espresso" show display-7" role="tab" data-toggle="tab" href="#tabs3-n_tab1" aria-selected="true">
<img src="assets/images/image.png"/>
</a></li>

<li class="nav-item mbr-fonts-style" ><a class="nav-link show display-7" id="crema" role="tab" data-toggle="tab" href="#tabs3-n_tab2" aria-selected="true">
<img src="assets/images/image.png"/>
</a></li>

<li class="nav-item mbr-fonts-style" ><a class="nav-link show display-7" id="organica" role="tab" data-toggle="tab" href="#tabs3-n_tab3" aria-selected="true">
<img src="assets/images/image.png"/>
</a></li>
</ul>
</div>
</div>
<div class="row px-1">
            <div class="tab-content">
                <div id="tabs3-n_tab0" class="tab-pane in mbr-table active" role="tabpanel">
                    <div class="row tab-content-row">
                        <div>
                            txt
                        </div>          
                    </div>
                </div>

                <div id="tabs3-n_tab1" class="tab-pane  mbr-table" role="tabpanel">
                    <div class="row tab-content-row">
                        <div>
                            txt                          
                        </div>
                    </div>
                </div>
                <div id="tabs3-n_tab2" class="tab-pane  mbr-table" role="tabpanel">
                    <div class="row tab-content-row">
                        <div>
                            txt
                        </div>  
                    </div>
                </div>

                <div id="tabs3-n_tab3" class="tab-pane  mbr-table" role="tabpanel">
                    <div class="row tab-content-row">
                        <div>
                           txt
                        </div>
                    </div>
                </div>


            </div>
        </div>

и скрипт, который показывает идентификатор в URL: 

$(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    history.pushState({}, '', e.target.hash);
  });

  var hash = document.location.hash;
  var prefix = "tab_";
  if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
  }
});

Теперь ссылки https://mysite.pl/#tabs3-k_tab3 открывают хорошую вкладку, но я должен перезагрузить страницу.И страница не прокручивается до раздела с вкладками.

Как я могу заставить это работать?

Ответы [ 3 ]

0 голосов
/ 14 сентября 2018

Итак, я изменил код ссылки на 

<a href="#tabs3-k_tab3" onclick="location.hash='tabs3-k_tab3'; location.reload();" class="blur-button">Zobacz promocje</a>

И теперь он открывает конкретную вкладку - это здорово.Мне нужно только это, чтобы прокрутить вниз до всех вкладок на клик тоже.У кого-то есть идеи, как этого добиться?

0 голосов
/ 12 марта 2019

Насколько я знаю, вы можете сделать это без ручного кодирования. В HTML Website Builder mobirise вы можете установить ссылку на определенный блок. Нажмите на пункт меню, затем добавьте ссылку на элемент. После этого выберите блок на странице.

an instruction for the link adding

0 голосов
/ 14 сентября 2018

В только что новой ссылке на местоположение /page/page.html, добавьте #id_of_location в конец, чтобы это было похоже на /page/page.html#id_of_location.страница переместится на экран так, что HTML-элемент <div id='id_of_location'> будет в верхней части экрана.

w # пример этого.

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_bookmark

...