Link to bootstrap tab with no modification to "a" tag

Question

There have been multiple solutions posted here for linking to tabs when using the bootstrap framework, but I'm looking for a slightly different solution and wondering if its possible.

There's a jsfiddle solution here demonstrating the behaviour I require: http://jsfiddle.net/technotarek/3hJ46/

Outline code below:

js

$("a").on('click', function() {
    # check if link id matches an element with data-toggle="tab"?
    # activate tab?
});

html

<div class="container">
    <p><a "tab-2">Go to Tab #2</a></p>

    <div class="row">
        <div class="span12">
            <ul class="nav nav-tabs" id="myTabs">
              <li class="active"><a id="tab-1" href="#one" data-toggle="tab">TAB #1</a></li>
              <li><a href="#two" id="tab-2" data-toggle="tab">TAB #2</a></li>
              <li><a href="#three" id="tab-3" data-toggle="tab">TAB #3</a></li>
            </ul>

            <div class="tab-content">
              <div class="tab-pane active" id="one">
                  <p>You're in Tab #1</p>
                  <p><a "tab-2">Go to Tab #2</a></p>
                  <p><a "tab-3">Go to Tab #3</a></p>
                </div>
              <div class="tab-pane" id="two">
                  <p>You're in Tab #2</p> 
                </div>
              <div class="tab-pane" id="three">
                  <p>Now #3.</p>
                  <p><a "tab-1">Back to Tab #1</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

You can click a link within the tab, or from outside the tab (on the same page) and the tab becomes activated. However, this requires that "a" tags have attribute "data-tab-destination" with the tab name. Due to the way we're automatically generating the html it's currently impossible (or v. difficult) to know if the link will point to a tab or any other part of the webpage, so it is not possible to add this attribute.

I'm therefore hoping for a solution (using javascript) that will detect for all links whether it points to a tab by searching for any element with matching id with attribute data-toggle="tab".

Any help greatly appreciated.

you can hit them in CSS or jq using css attribute selectors like a[data-tab-destination] — dandavis, Aug 22 '14 at 17:59
Rather than posting code that does something else, show your HTML so we know what we're working with. The demo fiddle is useful, but put *your* code in the question. — isherwood, Aug 22 '14 at 18:00

score 1 · Accepted Answer · edited May 23 '17 at 12:30

HTML

<div class="container">
    <div class="row">
        <div class="span12">
            <ul class="nav nav-tabs" id="myTabs">
              <li class="active"><a id="tab-1" href="#one" data-toggle="tab">TAB #1</a></li>
              <li><a href="#two" id="tab-2" data-toggle="tab">TAB #2</a></li>
              <li><a href="#three" id="tab-3" data-toggle="tab">TAB #3</a></li>
            </ul>

            <div class="tab-content">
              <div class="tab-pane active" id="one">
                  <p>You're in Tab #1</p>
                  <p><a href="#tab-2">Go to Tab #2</a></p>
                  <p><a href="#tab-3">Go to Tab #3</a></p>
                </div>
              <div class="tab-pane" id="two">
                  <p>You're in Tab #2</p> 
                </div>
              <div class="tab-pane" id="three">
                  <p>Now #3.</p>
                  <p><a href="#tab-1">Back to Tab #1</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

JS

$("a").on('click', function() {
    var href = $(this).attr('href');
    /* Just a hack to get the ID. You may need to think this through
     * in more detail for your use case. */
    var id = href.replace("#", ""); 
    // http://api.jquery.com/multiple-attribute-selector
    if ($("a[data-toggle='tab'][id='" + id + "']").length) {
        $("#" + id).click();        
    }
});

JSFiddle

Edit

Noticed missing logic in my JS code.

+ if ($("a[data-toggle='tab'][id='" + id + "']").length) {
- if ($("a[data-toggle='tab'][id='" + id + "']")) {

How can I detect if a selector returns null?

Link to bootstrap tab with no modification to "a" tag

1 Answers1