Bootstrap 4 - 重定向到特定选项卡

Posted

技术标签:

【中文标题】Bootstrap 4 - 重定向到特定选项卡【英文标题】:Bootstrap 4 - redirect to a specific tab 【发布时间】:2018-06-29 14:37:27 【问题描述】:

我正在为一个小项目使用 bootstrap 4,我希望有一个“标签”系统,这在 Bootstrap 上做得很好。问题是我尝试重定向特定选项卡上的使用。通过 ID 进行操作,html 中的 <a> 标记不起作用,我对 JS 一无所知。

这里是标签:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" id="mdr">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">TAB 1</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">TAB TWO</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Three TABS</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

我希望有一个链接能够在不点击标签的情况下更改用户的标签(通过链接):(

谢谢!

【问题讨论】:

Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink的可能重复 【参考方案1】:

您是否尝试将用户重定向到 page-URL#tab_id?

如果这不起作用,我已经尝试了https://codepen.io/rnr/pen/dMNZmx 的解决方案帖子,它在我的测试中运行良好。

只需将 JS 代码复制到您的 HTML 文件中,将其放在打开和关闭 script 标记之间。像这样(在加载jquery 包之后,即在上面显示的代码之后。):

<script>
/* COPY THE JS CODE HERE */
</script>

【讨论】:

这里有一个解决方案:codepen.io/rnr/pen/dMNZmx。只需将 JS 代码复制到您的 HTML 文件中,并在必要时进行一些修改。 非常感谢!我正是在寻找那个。唯一的问题是,当你点击链接时,标签页没有采取“活动”类,但不是很严重 虽然这可能会回答问题,但最好在此处提供实际信息而不仅仅是链接。 Link-only answers are not considered good answers and will probably be deleted.

以上是关于Bootstrap 4 - 重定向到特定选项卡的主要内容,如果未能解决你的问题,请参考以下文章

单击时如何在新选项卡或(新窗口)中重定向超链接?

从 AppDelegate 重定向到特定屏幕:点击通知

使用 Bootstrap 导航选项卡从另一个选项卡跳转到特定选项卡

链接到特定选项卡 Bootstrap

Bootstrap 3 - 将页面刷新到特定选项卡

从 Activity 到特定选项卡/片段的按钮 OnClick