链接到引导选项卡，不修改“a”标签答案

【问题标题】：Link to bootstrap tab with no modification to "a" tag链接到引导选项卡，不修改“a”标签
【发布时间】：2014-08-22 17:55:05
【问题描述】：

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

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

下面的大纲代码：

$("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），该解决方案将通过搜索具有与属性 data-toggle="tab" 匹配的 id 的任何元素来检测所有链接是否指向选项卡。

非常感谢任何帮助。

【问题讨论】：

您可以在 CSS 或 jq 中使用 css 属性选择器（如 a[data-tab-destination]）点击它们
与其发布做其他事情的代码，不如展示您的 HTML，以便我们知道我们正在处理什么。演示小提琴很有用，但请将 your 代码放在问题中。
isherwood：谢谢，我已经编辑了

标签： javascript jquery html twitter-bootstrap tabs

【解决方案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>

$("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?

【讨论】：