javascript - 页面刷新JQuery时设置活动类?
问题描述
我的页面上有一个 UL,它充当导航(它工作正常)。我复制了一些 jQuery 代码以保持类在页面重新加载时保持原样(通过 location.reload()),但由于我不太了解 javascript,因此无法设置它。
和我的 HTML 代码:
<!-- TABS NAVIGATION -->
<div id="tabs-nav">
<div class="row">
<div class="col-lg-12 text-center">
<ul id="myTab" class="tabs-1 ico-55 red-tabs clearfix">
<!-- TAB-1 LINK -->
<li class="tab-link current" data-tab="tab-1">
<span class="flaticon-pizza"></span>
<h5 class="h5-sm">Pizze</h5>
</li>
<!-- TAB-2 LINK -->
<li class="tab-link " data-tab="tab-2">
<span class="flaticon-burger"></span>
<h5 class="h5-sm">Panini</h5>
</li>
</ul>
</div>
</div>
</div>
<!-- END TABS NAVIGATION -->
<!-- TABS CONTENT -->
<div id="tabs-content">
<?php include_once "inc/db_connect.php"; ?>
<!-- TAB-1 CONTENT -->
<div id="tab-1" class="tab-content current">
<table class="editableTable sortable">
<!-- sql query -->
</table>
</div>
<!-- END TAB-1 CONTENT -->
<!-- TAB-2 CONTENT -->
<div id="tab-2" class="tab-content">
<div class="row">
<!-- database query -->
</div>
</div>
<!-- END TAB-2 CONTENT -->
</div>
<!-- END TABS CONTENT -->
我打算使用 location.reload 的方式
$(document).ready(function () {
$('.editableTable').SetEditable({
onAdd: function () {
$.ajax({
type: 'POST',
url: "action.php",
dataType: "json",
data: { action: 'add' },
success: function () {
location.reload();
},
});
}
});
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).class('current'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab li[href="' + activeTab + '"]').tab('show');
}
});
解决方案
保存$(e.target).class('current')
将不起作用。没有.class()
办法...
看来您希望使用href
打开选项卡...但是没有href
!
所以我认为你应该使用data-tab
.
$(document).ready(function(){
console.log("Page just loaded")
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $("li.current").data('tab')); // Change is here -- Save the data-tab value
console.log("a data-tab value was saved to localStorage")
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
console.log("There is an activeTab value stored:" , activeTab)
// Loop all li to find the one having a data-tab == activeTab
$('#myTab li').each(function(){
if($(this).data("tab") === activeTab){
$(this).tab('show');
}
});
}
})
推荐阅读
- ios - 无法识别 GMSMapView 中子视图上的手势
- c++ - 调用反向函数的代码不能在 Ubuntu 18 上的 g++ 或 clang++ 上编译,但在 mac osx 上神秘地工作
- java - 不能放一套
在 sharedPreferences.putStringSet() 中? - javascript - 使用自定义子文件夹 ID 将 JSON 数据库存储到 Cloud Firestore
- html - 我可以在背景图像上制作一个空白页吗?
- r - 将列作为函数参数传递
- python - Flask 有很多通过模型关联
- nginx - Nginx“large_client_header_buffers”指令的最大大小的含义
- python - 是否可以在不使用字典理解的情况下将字典的值与 int 进行比较?
- c++ - 为什么你想要一个类中的结构?