我有一個頁面，其中包含相同的 url，但在單擊選項卡后有很多選項卡，我可以看到其內容，但在我重繪 頁面選項卡 (0) 后立即出現，但我想要上次使用的選項卡。我怎樣才能做到這一點。這是js代碼
<script>
const tabBtn = document.querySelectorAll(".tab");
const tab = document.querySelectorAll(".tabShow");
function tabs(panelIndex){
tab.forEach(function(node){
node.style.display="none";
});
tab[panelIndex].style.display="block";
}
tabs(0);
$(".tab").click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
uj5u.com熱心網友回復：
您可以創建一個每次更改選項卡時都會更新的變數，然后檢查該變數等于什么以確定默認情況下應打開哪個選項卡。
uj5u.com熱心網友回復：
您可以使用Session Storage或Query 引數（搜索引數）或Hash 引數
會話存盤：可以通過鍵存盤一些值，直到選項卡關閉
哈希引數：資料存盤在 url 中。您甚至可以將 url 保存在某處或共享它，當它打開時，將打開所需的選項卡
查詢引數：與哈希引數相同，但更改后整個頁面重繪
會話存盤解決方案：
<script>
const tabButtons = document.querySelectorAll(".tab");
const tabs = document.querySelectorAll(".tabShow");
const changeTab = (tabIndex) => {
sessionStorage.setItem('currentTab', tabIndex);
tabs.forEach((node) => { node.style.display = "none"; });
tabButtons.forEach((tb) => tb.classList.remove('active'));
tabs[tabIndex].style.display = "block";
tabButtons[tabIndex].classList.add('active');
}
tabButtons.forEach((tabButton, index) => {
tabButton.onclick = () => changeTab(index)
});
changeTab(sessionStorage.getItem('currentTab') || 0);
</script>
哈希引數解決方案：
<script>
const tabButtons = document.querySelectorAll(".tab");
const tabs = document.querySelectorAll(".tabShow");
const changeTab = (tabIndex) => {
window.location.hash=`tab=${tabIndex}`;
tabs.forEach((node) => { node.style.display = "none"; });
tabButtons.forEach((tb) => tb.classList.remove('active'));
tabs[tabIndex].style.display = "block";
tabButtons[tabIndex].classList.add('active');
}
tabButtons.forEach((tabButton, index) => {
tabButton.onclick = () => changeTab(index)
});
const hash = new URLSearchParams(window.location.hash.slice(1));
changeTab(hash.get('tab') || 0);
</script>
Query Parameters解決方案
與 Hash Parameters 解決方案相同，但使用search代替hash
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/357749.html
標籤：javascript 姜戈
上一篇：在此代碼塊中的何處添加preventDefault()？
下一篇：正則運算式針對變數周圍的特定字符