Question

我在我的rails应用程序中使用Bootstrap，我希望使用此表单http://example.com/?tab=tab-one和http://example.com/?tab=tab-two制作标签，以便我知道如何实现此目标

我的标签是这样的

  <div class="optionset-menu bxsbdbdr">
    <ul class="nav nav-tabs setcustom-tab" role="tablist">
      <a href="#summary" aria-controls="summary" role="tab" data-toggle="tab"><li role="presentation" class="active hav-bordbot">Basic Infos</li></a>
      <a href="#languages-time" aria-controls="anguages-time" role="tab" data-toggle="tab"><li role="presentation" class="hav-bordbot">Language & Time zone</li></a>
      <a href="#basic" aria-controls="basic" role="tab" data-toggle="tab"><li role="presentation" class="havnt-bordbot">Change password</li></a>
    </ul>
  </div>

Answer 1

您可以查看我对Activate the tab of the location hash的回复以获取更多信息。

如果要在页面加载时导航到所选的URL，则需要在页面加载时添加javascript以从URL收集必要的信息，然后使用该信息打开相应的面板。

以下是使用选项卡哈希值的示例：

$(function() {

    // jump to tab if it exists 
    if (location.hash) {
        $('a[href="' + location.hash + '"]').tab('show');
    }

    // add tab hash to url to persist state
    $(document.body).on("shown.bs.tab", function(e){
      location.hash = e.target.hash;
    });

});

如果标签的ID为tab-two，您可以使用网址http://example.com/#tab-two

打开它

Here's a demo in Plunker

打开窗口或run it directly here

如何在Bootstrap中制作标签Clickable

1 个答案:

Here's a demo in Plunker