从外部链接到引导选项卡

Posted 2023-05-08

【中文标题】从外部链接到引导选项卡

【英文标题】：Linking to a Bootstrap Tab from outside

【发布时间】：2017-12-25 12:01:48

【问题描述】：

我有一个问题，希望你能帮助我从外部链接标签。它每次都会得到第一个链接 这是我的代码：

导航栏

              <li class="has-children"><a href="#">Produktionsprozess</a> 
                <ul>
                            <li><a href="#warenlogistik">Warenlogistik</a></li>
                            <li><a href="#fotoproduktion">Fotoproduktion</a></li>
                            <li><a href="#abstimmung">Abstimmung & Freigabe</a></li>
                            <li><a href="#postproduction">Postproduktion</a></li>

活动部分：

            <ul data-animate class="row list-unstyled action-list inline-type-2 bottom-space" role="tablist">
                <li role="presentation" class="col-lg-4 col-sm-6 bottom-space has-corner-line corner-anim active">
                    <a class="tab secondary-headline has-icon corner-anim" href="#warenlogistik" aria-controls="warenlogistik" role="tab" data-toggle="tab">
                        <i class="fi flaticon-shuffle"></i>
                        <h3 class="maintitle">Waren<strong>logistik</strong></h3>
                        <p class="subtitle">Roadtrip to reach your goals</p>

                        <span class="corner corner-1"></span>
                        <span class="corner corner-2"></span>
                    </a>
                </li>

我无法“到达”的部分：

                <li role="presentation" class="col-lg-4 col-sm-6 bottom-space has-corner-line corner-anim">
                    <a class="tab secondary-headline has-icon" href="#fotoproduktion" aria-controls="fotoproduktion" role="tab" data-toggle="tab">
                        <i class="fi flaticon-technology"></i>
                        <h3 class="maintitle">Foto<strong>produktion</strong></h3>
                        <p class="subtitle">Photography at its best</p>

                        <span class="corner corner-1"></span>
                        <span class="corner corner-2"></span>
                    </a>
                </li>

在网格容器或手风琴中我也有这个代码。它适用于“warenlogistik”第一个，但不适用于第二个“fotoproduktion”：

            <article class="row tab-pane in fade active" id="warenlogistik">
                <div class="col-sm-6">
                    <figure>
                        <img src="images/pictures/produktionsprozess/warenlogistik.jpg"  />
                    </figure>
                </div>                      

<div class="col-sm-6">
                            <div class="secondary-headline">
                                <h3 class="maintitle">Waren<strong>logistik</strong></h3>
                                <h4 class="subtitle">Feel the innovation</h4>
                            </div> <p> text text text </p></div></article>


<article class="row tab-pane fade" id="fotoproduktion">
                        <div class="col-sm-6">
                            <figure>
                                <img src="images/pictures/produktionsprozess/fotoproduktion.jpg"  />
                            </figure>
                        </div><div class="col-sm-6">
                            <div class="secondary-headline">
                                <h3 class="maintitle">Foto<strong>Produktion</strong></h3>
                                <h4 class="subtitle">text text</h4>
                            </div><p> text text text </p>
                    </div>
                </article>

script.js:

    $('a[data-toggle="tab"]') .on('shown.bs.tab', function()  
        $window.trigger ('resize');
    );

script.min.js： .....

a('a[data-toggle="tab"]').on ("shown.bs.tab",function()
b.trigger("resize")) ,
b.on("load",function()
a(".preloader").
fadeOut("slow"), 
a("body").addClass("loaded")

而且我在 bootstrap.min.js 中有一些东西

我会在 4 小时后尝试...抱歉，我没有收到代码 - 面板。

希望有人能帮忙！

问候 马库斯

我已经在 script.js 中尝试过，但它不起作用：

$('#tab1 a').click(function (e) 
    e.preventDefault();
    $('a[href="' + $(this).attr('href') + '"]').tab('show');
)

);

编辑： 好的，我得到了 data-toggle="tab" 开头，但我仍然无法跳转到该部分。它刚刚开放

<li class="has-children"><a href="#">Produktionsprozess</a> 
                    <ul>
                                <li><a href="#warenlogistik" data-toggle="tab">Warenlogistik</a></li>
                                <li><a href="#fotoproduktion" data-toggle="tab">Fotoproduktion</a></li>
                                <li><a href="#abstimmung" data-toggle="tab">Abstimmung & Freigabe</a></li>
                                <li><a href="#postproduction" data-toggle="tab">Postproduktion</a></li>

我也补充了：

$(function () 
$('#fotoproduktion a').click(function (e) 
    e.preventDefault();
    $('a[href="' + $(this).attr('href') + '"]').tab('show');
)

要了解我在说什么，请看一下： https://www.bnecreative.com/blog/deeplink-bootstrap-tabs/

水龙头开口会起作用，那不再是问题了。但我想打开非活动选项卡并向下滚动到它。到目前为止，我必须在导航栏中打开带有链接的选项卡并手动向下滚动到内容。

【问题讨论】：

您想使用导航栏切换标签吗？

是的，我愿意——那太好了

【参考方案1】：

从您的问题中我可以看出，您希望能够从 <a> 链接访问各个选项卡。如果是这样..

您将不得不使用 jquery 来引导链接，而不是使用带有 href 的静态链接。

JQUERY

$(function () 
    $('#tab1 a').click(function (e) 
        e.preventDefault();
        $('a[href="' + $(this).attr('href') + '"]').tab('show');
    )
);

HTML

<a id="tab1" href="#postproduction">tab 1</a>

【讨论】：

谢谢，我试过了，但它没有解决问题:(我编辑了代码以获得一些额外的细节（活动和非活动部分）