twitter-bootstrap-3 – 引导链接到具有url的选项卡

发布时间：2020-12-18 00:26:52 所属栏目：安全来源：网络整理

导读：我正在使用引导程序3,并且在将URL链接到特定的选项卡上时遇到一些问题,面板更改,但已激活的选项卡不会. 所以我想要的是 a href =“#tab2”data-toggle =“tab” link / a,进入tab2,但它只能到tab2的面板,激活选项卡. 这是html： div class="tabbable" ul cla

我正在使用引导程序3,并且在将URL链接到特定的选项卡上时遇到一些问题,面板更改,但已激活的选项卡不会.
所以我想要的是< a href =“#tab2”data-toggle =“tab”> link< / a>,进入tab2,但它只能到tab2的面板,激活选项卡.

这是html：

<div class="tabbable">
 <ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
 </ul>

 <div class="tab-content">
  <div class="tab-pane active" id="tab1">
     <p><a href="#tab2" data-toggle="tab">link</a>.</p>
  </div>

  <div class="tab-pane" id="tab2">
     <p> I'm in Section 2.</p>
  </div>

 <div class="tab-pane" id="tab3">
   <p>Howdy,I'm in Section 3 </p>
  </div>
 </div>
</div>

您可以在此链接http://bootply.com/90412中测试

解决方法

为了激活该选项卡,您可以使用jQuery插件,如 bootstrap所示.
因此,您可以将这段jQuery代码添加到程序中以启用该选项卡：

$(function () {
    $('#tab1 a').click(function (e) {
        e.preventDefault();
        $('a[href="' + $(this).attr('href') + '"]').tab('show');
    })
});

您可以查看此链接：Updated code

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!