我正在使用 Bootstrap 4 来做一个小项目,我希望有一个“选项卡”系统,这在 Bootstrap 上做得很好。问题是我尝试重定向特定选项卡上的使用。通过 ID 和 <a>
来完成此操作html 中的标签不起作用,我对 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>
我希望通过链接能够更改用户的选项卡(通过链接),而无需单击选项卡:(
谢谢!
最佳答案
您是否尝试过将用户重定向到 page-URL#tab_id?
如果这不起作用,我已尝试解决方案帖子 https://codepen.io/rnr/pen/dMNZmx在我的测试中效果很好。
只需将 JS 代码复制到 HTML 文件中,并将其放在打开和关闭 script
标记之间即可。像这样(在加载 jquery
包之后,即在上面显示的代码之后。):
<script>
/* COPY THE JS CODE HERE */
</script>
关于javascript - Bootstrap 4 - 重定向到特定选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48356596/