CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
renee
renee

Reputation: 13

Bootstrap 3.0.2 - Link content from one tab-pane to content in another

I'm need to create a link from one tab-pane to content in another tab-pane. For example, I have an overview tab and want to link to a specific image in the gallery tab, i.e. when I click on the link, it should make the other tab active and move to the correct place in the gallery.

I loaded the code here 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>

Upvotes: 1

Views: 1049

Answers (2)

davidkonrad
davidkonrad

Reputation: 85518

What you want is a two step procedure :

link to content -> open tab -> scroll to content

This cannot be done natively by bootstrap. To achieve this, we must know what tab each link targets, and the id of the element we want to scroll to. Change the link above to 

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

where href is the id of the target in .tab-content, and data-tab is the id of the tab we want to open. We can now implement a click function that performs the tab switch and final scrolling :

$("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);    
});

Now, if you want to have a link to another tab, all you need is to define data-tab and of course have a valid id as href.

see working demo -> http://jsfiddle.net/k5Lv95L1/

Upvotes: 0

Suganth G
Suganth G

Reputation: 5156

Try this:

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();
        });

Upvotes: 2

Related Questions