Activate a Tab using a link elsewhere on the page

Question

I am using Bootstrap Tabs in my HTML page.

Here is the HTML code. I am trying to activate the #descr tab through an explicit a element, but one that is outside of the nav-tabs structure. Any idea how it can be done.

<a href="#descr">Read More</a>

<ul class="nav nav-tabs">
    <li class="active"><a href="#specs" data-toggle="tab">Specification</a></li>
    <li><a href="#descr" data-toggle="tab">Description</a></li>
</ul>

<div class="tab-content">
    <!--Tab1 (Tech Specs)-->
    <div class="tab-pane fade in active" id="specs">
        HELLO
    </div>

    <!--Tab2 (Description)-->
    <div  class="tab-pane fade" id="descr">
        <div class="container">
            <div class="row">

            <div class="col-lg-8 col-md-7 col-sm-7">
                <p class="p-style2">Description</p>

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

Then this question might be a duplicate of http://stackoverflow.com/q/7862233/145346 — Mottie, Jan 16 '15 at 12:22
@Mottie That's not quite the same, that's if you've arrived at your page with an anchor in the URL and want it to automatically go to the right tab. This question is about activating a tab within your current page, but from outside the tab structure — James Thorpe, Jan 16 '15 at 12:24

James Thorpe · Accepted Answer · 2015-01-16T12:31:32.640

3

If you give your a tag an ID (or have some other way of selecting it), you can then use a click handler to invoke the bootstrap tab functionality through JavaScript:

<a id="manualTab" href="#">Read More</a>

Using the info from the bootstrap docs:

$('#manualTab').click(function(e) {
    $('li a[href="#descr"]').tab('show')
    e.preventDefault();
});

edited Jan 16 '15 at 12:31

answered Jan 16 '15 at 12:05

James Thorpe

31,411
5
72
93

score 0 · Answer 2 · answered Jan 16 '15 at 11:59

You can either achieve this using CSS, JS, or both. But not HTML alone.

Then again, this question has been answered quite a few times so I won't go into depth. But here's a working example that uses jQuery: http://jsfiddle.net/R85tE/293/

$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#nav li').click(function() {
    $('#nav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-content div').hide();

    var indexer = $(this).index(); //gets the current index of (this) which is #nav li
    $('#tab-content div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
});

<div id="tabmenu">

    <ul id="nav">
        <li><a href="#" class="active">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    <div id="tab-content">

        <div id="tab1">
            <p>This is a very simple jQuery tabbed navigation.</p>
        </div>

        <div id="tab2">
            <p>This can contain anything.</p>
        </div>

        <div id="tab3">
            <p>Like photos:</p><br />
            <img src="http://www.catname.org/images/cat04.jpg" alt=""/>
        </div>

        <div id="tab4">
            <p>Or videos:</p><br />
            <iframe width="250" height="180" src="http://www.youtube.com/embed/TZ860P4iTaM" frameborder="0" allowfullscreen></iframe>
        </div>

    </div>

</div>

Activate a Tab using a link elsewhere on the page

2 Answers2