[英]JavaScript keep tab on page reload
我的選項卡式內容如下所示:
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
標簽的JavaScript如下所示:
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
我正在使用W3學校的代碼。 重新加載頁面時,我希望保留我所位於的選項卡,而不是將其重新加載到默認選項卡。 編輯:為澄清起見,我要刷新頁面時單擊的最后一個選項卡加載。
您必須使用某種持久性存儲方法來實現此目的:Cookies或localStorage 。
您必須將一個單擊的選項卡的名稱保存在openCity
函數中,並在單擊id="defaultOpen"
。 如果未從cookie或localStorage讀取任何值,請執行默認單擊。
我推薦PPK的cookie函數 。
我更喜歡在網址中使用標簽。
您應該像這樣將buttont更改為<a>
:
<a class="tablinks" href="#london" onclick="openCity(event, 'London')">London</a>
然后在准備就緒的文檔中檢查主題標簽並選擇所需的標簽:
$( document ).ready(function() {
if(window.location.hash == ""){
openCity(event, 'London')
} else if( window.location.hash == "#paris"{
openCity(event, 'Paris')
}
});
等等
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.