javascript - 刷新引导选项卡
问题描述
我正在寻找有关引导选项卡的帮助。
我有一个带有面板的引导选项卡,并希望打开的选项卡在刷新时保持不变。我们有很多事情要做,但这主要是因为我们通过 NinjaForms 输入了新数据。
反正。这是我找到的解决方案,但由于某种原因我无法让它工作。
选项卡
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading" style="z-index:998;">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#tab1overview" data-toggle="tab"><i
class="fa fa-building" style="color:#50AE54"></i> Client Overview</a> .
</li>
<li><a href="#tab2sites" data-toggle="tab"><i class="fa fa-
sitemap" style="color:#1DB2C8"></i> Sites</a></li>
<li><a href="#tab3users" data-toggle="tab"><i class="fa fa-user-
plus" style="color:#FC5830"></i> Users</a></li>
<li><a href="#tab4assets" data-toggle="tab"><i class="fa fa-
desktop" style="color:#2C98F0"></i> Assets</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown"><i class="fa fa-wrench"
style="color:#333333"></i> Services <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab11internal" data-toggle="tab"><i class="fa
fa-wrench" style="color:#333333"></i> Internal Services</a></li>
<li><a href="#tab12external" data-toggle="tab"><i class="fa
fa-wrench" style="color:#333333"></i> External Services</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown"><i class="fa fa-wrench"
style="color:#333333"></i> Web Services <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab6webhosting" data-toggle="tab"><i class="fa
fa-wrench" style="color:#333333"></i> Web Hosting</a></li>
<li><a href="#tab7domains" data-toggle="tab"><i class="fa
fa-wrench" style="color:#333333"></i> Domains</a></li>
<li><a href="#tab8crushftp" data-toggle="tab"><i class="fa
fa-wrench" style="color:#333333"></i> SFTP</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown"><i class="fa fa-
certificate" style="color:#333333"></i> Licenses <span
class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab9email" data-toggle="tab"><i class="fa fa-
certificate" style="color:#333333"></i> eMail</a></li>
</ul>
</li>
<li><a href="#tab10faq" data-toggle="tab"><i class="fa fa-
question" style="color:#1DB2C8"></i> FAQ</a></li>
<!-- Commented out for now <li><a href="#tab10migrations" data-
toggle="tab"><i class="fa fa-rocket" style="color:#2C98F0"></i>
Migrations</a></li> -->
</ul>
</div>
JS
$(function() {
$('a[data-toggle="tab"]').on('click', function(e) {
window.localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = window.localStorage.getItem('activeTab');
if (activeTab) {
$('#myTab a[href="' + activeTab + '"]').tab('show');
window.localStorage.removeItem("activeTab");
}
});
可湿性粉剂功能
wp_enqueue_script( 'tabs-refresh',
get_template_directory_uri().'/library/js/tabs.js', array( 'jquery' ),
'1.0.0', false );
只是补充一下,在 Chrome 中检查控制台后。我发现了这个:
任何帮助,将不胜感激。
谢谢
解决方案
默认情况下,当您在 Wordpress 中加入 jQuery 时,您必须使用 jQuery,并且不使用 $(这是为了与其他库兼容)。
参见:TypeError: $ is not a function when calling jQuery function
让你的功能:
(function($){
[...]
})(jQuery);
所以:
(function($){
$('a[data-toggle="tab"]').on('click', function(e) {
window.localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = window.localStorage.getItem('activeTab');
if (activeTab) {
$('#myTab a[href="' + activeTab + '"]').tab('show');
window.localStorage.removeItem("activeTab");
}
})(jQuery);
推荐阅读
- matlab - 使用 MATLAB 使用 checkGroundTruthDatastore 创建用于对象检测的快速 RCNN 错误
- azure - 在 Azure 数据工厂中提取元数据
- swiftui - 映射内部 VStack 导致崩溃
- html - 为什么导航栏在悬停时没有响应
- typescript - 打字稿如何在扩展盲输入时定义响应
- postgresql - 无法将 CSV 文件导入 PostgreSQL
- matlab - 从 .rdt 奥林巴斯文件超声波访问数据
- swift - 使用 DragGesture 移动视图,同时在顶部有一个 ScrollView
- javascript - 查找超过 x 个单词的单词(打印输入了多少单词)
- python - IsolationForest 决策分数到概率算法的转换