javascript - 从另一个页面单击链接时打开特定选项卡
问题描述
大家好,我需要帮助,
当在另一个页面上单击链接时,我需要在页面加载后显示选项卡,我已经看到这是使用哈希 #id 完成的,但是有没有任何可能的方法可以使用数据过滤器来做到这一点,因为它们是那些控制标签的?
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills" id="filters">
<li class="active"><a href="#" data-filter="*">All</a></li>
<li><a href="#" data-filter=".Tab1">Tab1</a></li>
<li><a href="#" data-filter=".Tab2">Tab2</a></li>
<li><a href="#" data-filter=".Tab3">Tab3</a></li>
</ul>
</div>
</div>
</div>
解决方案
您可以在查询字符串中传递特殊请求参数。然后获取参数值并激活相应的选项卡。
例如,添加tab-name
到目标 URL 的查询字符串中(完整的相对 URL 为/my-page?tab-name=profile
)。以下表达式返回参数的值,等于'profile'
:
var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];
如果tab-name
省略,则表达式返回空字符串。
然后通过接收值选择导航选项卡并使用show
方法激活其关联窗格。
var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];
tabName='profile'; // remove this line on real page
if(tabName.length)
$('#myTabs .nav-link[href="#' + tabName + '"]').tab('show');
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<ul class="nav nav-pills" id="myTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
请注意,在片段中我tabName
直接设置了值,因为无法向片段发送自定义请求。所以,你必须tabName='profile';
在你的真实页面上删除。
推荐阅读
- css - ion-item / ion-native 背景颜色
- reactjs - React:要重用的材料 ui 样式按钮不适应样式
- go - 如何处理长时间运行的服务器响应和将其视为停止连接的负载均衡器
- python - 将 API unicode 响应保存到 zip 文件 python
- elixir - 如何确保 distillery 在版本中包含 Erlang inets?
- meteor - 2019年流星值得用吗?它还活着吗?
- spring - 如何调整 Spring Boot 安全配置?
- javascript - 在传递给反应路由器的理解路径中有问题
- tcl - python-2.7.10-1.ppc AIX 7.1 需要 libtcl8.4.so
- sentiment-analysis - 哪个 API 类似于 Twitter 流 API,我可以从中获取来自 Flume 的数据并对这些数据进行情绪分析?