链接到bootstrap选项卡，无需修改"标签

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

本文关键字：修改 quot 标签 bootstrap 选项 链接      更新时间：2023-09-26

有多个解决方案张贴在这里链接到标签时，使用引导框架，但我正在寻找一个稍微不同的解决方案，想知道它是否可能。

这里有一个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)，将检测所有链接是否指向一个标签通过搜索任何元素与属性data-toggle="tab"匹配id。

感谢您的帮助。

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 + "']")) {

如何检测选择器是否返回null?

相关文章：