Bootstrap -链接滚动和打开特定选项卡

Question

我在页面顶部有链接：

<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中显示id的脚本：

$(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');
  }
});

现在links https://mysite.pl/#tabs3-k_tab3打开了一个很好的标签，但我必须重新加载页面。而且页面不会滚动到带有标签的部分。

我怎么才能让它起作用呢？

Answer 1

因此，我将链接的代码更改为

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

现在它会打开特定的标签--这很棒。我只需要这个滚动到所有的标签上点击太。有人知道如何做到这一点吗？

Answer 2

在刚刚新建的位置链接/page/page.html中，将#id_of_location添加到它的末尾，这样它就像这样的/page/page.html#id_of_location。页面将移动屏幕，使<div id='id_of_location'>的HTML元素位于屏幕顶部。

这方面的w#示例。

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

Answer 3

据我所知，您可以在不手动编码的情况下做到这一点。在HTML网站生成器mobirise中，您可以将链接设置为某个区块。单击菜单中的项目，然后添加指向该项目的链接。之后，在页面上选择块。

​

​