链接到引导程序选项卡，而无需修改“ a”标签

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.

Answer 1

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?