Question

我有自举标签，我想在URL链接的基础上激活标签。

例如：

xyz.xxx/index#tab2 应在页面加载时 tab2激活。

到目前为止，这是我的代码

protected
def confirmation_required?
  false
end

默认情况下，它会激活tab1，因此在我的情况下可能会根据我的URL链接默认激活第二个标签。

假如我把＃tab2放在URL中，那么它应该在页面加载时默认激活tab2。

Answer 1

你可以使用像这样的jquery来实现它。您的网址例如＆＃34; www.myurl.com/page#tab1" ;;

var url = window.location.href;

从网址链接中获取激活标签。

 var activeTab = url.substring(url.indexOf("#") + 1);

删除旧的活动标签类

 $(".tab-pane").removeClass("active in");

将活动类添加到新标签页

$("#" + activeTab).addClass("active in");

或者在获得activeTab后直接打开标签。

$('a[href="#'+ activeTab +'"]').tab('show')

Answer 2

根据您设置JS的方式，您应该可以这样做：

<iframe frameborder="0" height="600px" scrolling="no" src="http://www.ahv-services.ch/reschweb/rentenform.aspx" width="100%"></iframe>

www.myurl.com/page#tab1

www.myurl.com/page#tab2

其中www.myurl.com/page#tab3，#tab1和#tab2等于标签的#tab3

修改

见这里： Twitter Bootstrap - Tabs - URL doesn't change

Answer 3

您可以将ID添加到<ul class="nav nav-tabs nav-stacked" id="myTab">，然后使用以下javascript代码：

$(document).ready(() => {
  let url = location.href.replace(/\/$/, "");

  if (location.hash) {
    const hash = url.split("#");
    $('#myTab a[href="#'+hash[1]+'"]').tab("show");
    url = location.href.replace(/\/#/, "#");
    history.replaceState(null, null, url);
    setTimeout(() => {
      $(window).scrollTop(0);
    }, 400);
  } 

  $('a[data-toggle="tab"]').on("click", function() {
    let newUrl;
    const hash = $(this).attr("href");
    if(hash == "#home") {
      newUrl = url.split("#")[0];
    } else {`enter code here`
      newUrl = url.split("#")[0] + hash;
    }
    newUrl += "/";
    history.replaceState(null, null, newUrl);
  });
});

有关更多详细信息，follow this link。

Answer 4

如果您只想基于url触发它，也可以按照以下步骤进行操作

gitlab-rake gitlab:shell:setup

Answer 5

$(function(){
    var url = window.location.href;
    var activeTab = url.substring(url.indexOf("#") + 1);
    if($.trim(activeTab) == 'Exhibitor') // check hash tag name for prevent error
    {
        $(".tab-pane").removeClass("active in");
        $("#" + activeTab).addClass("active in");
        $('a[href="#'+ activeTab +'"]').tab('show');
    }
});

Answer 6

使用 URL API 中的 URL() 构造函数：

URL {
  href: "https://stackoverflow.com/posts/67036862/edit",
  origin: "https://stackoverflow.com",
  protocol: "https:",
  username: "",
  password: "",
  host: "stackoverflow.com",
  hostname: "stackoverflow.com",
  port: "",
  pathname: "/posts/67036862/edit",
  search: ""
}

根据 URL 链接使 Bootstrap 选项卡处于活动状态：

$(function() {
  /**
   * Make Bootstrap tab Active on the bases of URL link
   */
  const loc = new URL(window.location.href) || null
  if (loc !== null) {
    console.debug(loc)
    if (loc.hash !== '') {
      $('.tab-pane').removeClass('active in')
      $(loc.hash).addClass('active in')
      $(`a[href="${ loc.hash }"]`).tab('show')
    }
  }
})

在URL链接的基础上激活Bootstrap选项卡

6 个答案: