Question

我遇到了问题，希望您能帮我链接到外面的标签页。它每次都会获得第一个链接这是我的代码：

导航栏

              <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" alt="Make a concept" />
                    </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" alt="Make a concept" />
                            </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');
})

}）;

编辑：好吧，我得到了数据切换=“选项卡”的开头，但我仍然无法跳转到该部分。刚刚开幕

<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/

水龙头开口可以工作，这不再是问题了。但我想打开非活动选项卡并向下滚动到它。到目前为止，我必须使用导航栏中的链接打开选项卡，然后向下滚动到内容。

Answer 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>

从外部

1 个答案: