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>

和在网址中显示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');
  }
});

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

如何使它正常工作？

Answer 1

在新的位置链接/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 2

据我所知，您可以执行此操作而无需手动对其进行编码。在HTML Website Builder移动中，您可以将链接设置为特定的块。单击菜单项，然后向该项添加链接。之后，在页面上选择阻止。

an instruction for the link adding

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

2 个答案: