smecontribs/smeserver-mailstats
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Arrange to remeber the tab selected in web page

Browse Source
This commit is contained in:
Brian Read
2024-07-15 06:35:15 +01:00
parent c7cf518477
commit a1c9a698ee
2 changed files with 76 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
root/opt/mailstats/templates/mailstats.html.pt
View File

@@ -54,10 +54,10 @@
<br />
<!--Tabs -->
<div class="tab-container">
<div class="tab tab-active" onclick="openTab(event, 'tab1')">Table</div>
<div class="tab" onclick="openTab(event, 'tab2')">Stacked Bar Graph</div>
<div class="tab" onclick="openTab(event, 'tab3')">Heat Map</div>
<div class="tab" onclick="openTab(event, 'tab4')">Line Graph</div>
<div class="tab tab-active" data-index="0" onclick="openTab(event, 'tab1')">Table</div>
<div class="tab" data-index="1" onclick="openTab(event, 'tab2')">Stacked Bar Graph</div>
<div class="tab" data-index="2" onclick="openTab(event, 'tab3')">Heat Map</div>
<div class="tab" data-index="3" onclick="openTab(event, 'tab4')">Line Graph</div>
</div>
<div id="tab1" class="tab-content tab-content-active">
@@ -125,18 +125,54 @@
<script>
window.onload = function(){doNavs();}
function openTab(event, tabId){
// Get all elements with class="tab-content" and hide them
const tabContents = document.querySelectorAll('.tab-content');
tabContents.forEach(content => content.classList.remove('tab-content-active'));
//function openTab(event, tabId){
//// Get all elements with class="tab-content" and hide them
//const tabContents = document.querySelectorAll('.tab-content');
//tabContents.forEach(content => content.classList.remove('tab-content-active'));
// Get all elements with class="tab" and remove the class "tab-active"
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => tab.classList.remove('tab-active'));
//// Get all elements with class="tab" and remove the class "tab-active"
//const tabs = document.querySelectorAll('.tab');
//tabs.forEach(tab => tab.classList.remove('tab-active'));
// Show the current tab content, and add an "active" class to the clicked tab
document.getElementById(tabId).classList.add('tab-content-active');
event.target.classList.add('tab-active');}
//// Show the current tab content, and add an "active" class to the clicked tab
//document.getElementById(tabId).classList.add('tab-content-active');
//event.target.classList.add('tab-active');}
function openTab(evt, tabName) {
// Declare all variables
var i, tab_content, tab;
// Get all elements with class="tab_content" and hide them
tab_content = document.getElementsByClassName("tab-content");
for (i = 0; i < tab_content.length; i++) {
tab_content[i].style.display = "none";
}
// Get all elements with class="tab" and remove the class "active"
tab = document.getElementsByClassName("tab");
for (i = 0; i < tab.length; i++) {
tab[i].className = tab[i].className.replace(" tab-active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " tab-active";
// Store the active tab index
sessionStorage.setItem('activeTab', evt.currentTarget.getAttribute("data-index"));
}
document.addEventListener("DOMContentLoaded", function() {
// Get the stored tab index from sessionStorage
let activeTab = sessionStorage.getItem('activeTab');
// If there's a stored tab, show that tab
if (activeTab !== null) {
document.querySelector(`[data-index="$${activeTab}"]`).click();
}
});
</script>
<p class="cssvalid">