javascript - 链接到 Bootstrap 选项卡，未修改 "a"标记

Question

这里发布了多个解决方案，用于在使用 Bootstrap 框架时链接到选项卡，但我正在寻找一个稍微不同的解决方案，并想知道它是否可能。

这里有一个 jsfiddle 解决方案演示了我需要的行为: http://jsfiddle.net/technotarek/3hJ46/

代码概要如下:

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>

您可以单击选项卡内或选项卡外部(同一页面上)的链接，然后选项卡将被激活。但是，这要求“a”标签具有带有选项卡名称的属性“data-tab-destination”。由于我们自动生成 html 的方式，目前不可能(或很难)知道链接是否指向选项卡或网页的任何其他部分，因此无法添加此属性。

因此，我希望有一个解决方案(使用 javascript)，通过搜索具有匹配 id 和属性 data-toggle="tab"的任何元素来检测所有链接是否指向选项卡。

非常感谢任何帮助。

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

编辑

注意到我的 JS 代码中缺少逻辑。

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

How can I detect if a selector returns null?