DEMO

Question

我需要创建一个从一个选项卡窗格到另一个选项卡窗格中的内容的链接。例如，我有一个概述选项卡，想要链接到图库标签中的特定图像，即当我点击链接时，它应该激活另一个标签并移动到图库中的正确位置。

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

SCRIPT：

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

Answer 2

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

指向内容的链接 - ＆gt;打开标签 - ＆gt;滚动到内容

这不能通过bootstrap本地完成。要实现这一点，我们必须知道每个链接所针对的选项卡，以及我们要滚动到的元素的ID。将上面的链接更改为

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

其中href是id中目标的.tab-content，而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。

参见工作演示 - ＆gt;的 http://jsfiddle.net/k5Lv95L1/

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

2 个答案:

DEMO