如何从外部链接打开bootstrap 3选项卡?

时间:2019-08-26 12:21:46

标签: javascript twitter-bootstrap-3

我想在我网站的另一页中创建一个指向特定标签的链接。

我试图创建这样的链接www.example.com/test.html#tab2,但是它始终以第一个标签为目标(我想显示类的标签)。

INDEX.HTML

<a href="test.html#menu-catalog">link for catalog</a>


TEST.HTML

<ul class="nav nav-tabs">
    <li id="homeTab" class="active"><a data-toggle="tab" href="#home" aria-expanded="true">menu 1</a></li>
    <li id="menu1Tab"><a data-toggle="tab" href="#menu1">menu 2</a></li>
    <li id="menu2Tab"><a data-toggle="tab" href="#menu-catalog">menu 3</a></li>
    <li id="menu3Tab"><a data-toggle="tab" href="#menu3">menu 4</a></li>
</ul>

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">

....
    </div>

    <div id="menu1" class="tab-pane fade">
            ....
    </div>

    <div id="menu-catalog" class="tab-pane fade">
        .....

    </div>
    <div id="menu3" class="tab-pane fade">
       ....
    </div>
</div>

When I click the link from index.html to target and open the tab with the right id.

2 个答案:

答案 0 :(得分:3)

如果您正在使用bootstrap + jquery设置,则可以通过以下操作很容易地获得此行为:

s = df.groupby('var1')['var2'].agg(list).add_prefix('list_')

for var, lst in s.iteritems():
    globals()[var] = lst

答案 1 :(得分:0)

尝试

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});