Bootstrap 3.0.2 - 将一个选项卡窗格中的内容链接到另一个选项卡窗格中的内容

Question

我需要创建一个从一个选项卡窗格到另一个选项卡窗格中内容的链接。 例如，我有一个概览选项卡，并希望链接到图库选项卡中的特定图像，即当我单击链接时，它应该使另一个选项卡处于活动状态并移动到图库中的正确位置。

我在这里加载了代码http://jsfiddle.net/tyec07rx/

<div class="container">
    <div class="row">
        <div class="container">
            <ul class="nav nav-pills" role="tablist">
                <li class="active"><a href="#overview-panel" role="tab" data-toggle="tab">Overview</a></li>
                <li><a href="#gallery-panel" role="tab" data-toggle="tab">Gallery</a> </li>
            </ul>
        </div>

        <div class="tab-content">
            <div id="overview-panel" class="tab-pane active">
                <p>We have new <a href="#sticker-packs">sticker kits</a> for your capri.</p>
                <p>Options:</p>
                <ul>
                    <li><a href="#target">Target</a></li>
                    <li>British flag</li>
                    <li>Stripes</li>
                </ul>
            </div>
        <div id="gallery-panel" class="tab-pane">
            <p>Image of sticker packs to go here</p>
            <p class="sticker-packs">Clicked link from Overview should get here...</p>

            <ul>
                <li class="target">Target sticker image (click through from Overview should get here)</li>
                <li>British sticker image</li>
                <li>Stripe sticker image</li>
            </ul>

        </div>        
    </div>
</div>

Answer 1

试试这个：

DEMO

HTML::

<div class="container">
    <div class="row">
        <div class="container">
            <ul class="nav nav-pills" role="tablist">
                <li class="active"><a href="#overview-panel" role="tab" data-toggle="tab">Overview</a></li>
                <li><a id="li" href="#gallery-panel" role="tab" data-toggle="tab">Gallery</a> </li>
            </ul>
        </div>

        <div class="tab-content">
            <div id="overview-panel" class="tab-pane active">
                <p>We have new <a href="#sticker-packs">sticker kits</a> for your capri.</p>
                <p>Options:</p>
                <ul>
                    <li><a id="btn" href="#target">Target</a></li>
                    <li>British flag</li>
                    <li>Stripes</li>
                </ul>
            </div>
            <div id="gallery-panel" class="tab-pane">
                <p>Image of sticker packs to go here</p>
                <p class="sticker-packs">Clicked link from Overview should get here...</p>

                <ul>
                    <li class="target">Target sticker image (click through from Overview should get here)</li>
                    <li>British sticker image</li>
                    <li>Stripe sticker image</li>
                </ul>

            </div>
        </div>
    </div>
</div>

脚本：

  $("#btn").click(function () {
            $("#li").click();
        });

Answer 2

你想要的是一个两步程序：

链接到内容 -> 打开选项卡 -> 滚动到内容

这不能通过引导程序本地完成。为了实现这一点，我们必须知道每个链接的目标选项卡，以及我们想要滚动到的元素的 id。把上面的链接改成

<li><a href="#target" data-tab="#gallery-panel">Target</a></li>

其中href是.tab-content中目标的id，data-tab是我们要打开的标签的id。我们现在可以实现一个点击函数来执行标签切换和最终滚动：

$("a[data-tab]").on('click', function() {
    var tab = $(this).attr('data-tab'),
        target = $(this).attr('href');
    $('ul.nav a[href="' + tab + '"]').tab('show');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 1);    
});

现在，如果您想要链接到另一个标签，您只需定义data-tab，当然还有一个有效的id 为href。

查看工作演示 -> http://jsfiddle.net/k5Lv95L1/