时间戳

首页 > 解决方案 > 在重新加载时保留 HTML 选项卡

javascript - 在重新加载时保留 HTML 选项卡

问题描述

我知道 html 和 javascript。我正在尝试更改 JavaScript 部分的以下代码，以确保当我重新加载页面时，它不会返回到第一个选项卡。当我单击“巴黎”的第二个选项卡并刷新页面时，它会返回到“伦敦”作为活动选项卡。如何修改下面的 JavaScript 代码以在重新加载后保留最新的活动选项卡？我从 w3school 获得了代码：https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

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";
}
body {
  font-family: Arial;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
```
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Tabs</h2>
  <p>Click on the buttons inside the tabbed menu:</p>

  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')">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>


</body>

</html>

```

标签： javascripthtmltabs

解决方案

检查JSFIDDLE，仅在 jsFiddle 上允许

const tablinks = document.querySelectorAll('button.tablinks');
const contents = document.querySelectorAll('.tabcontent');
const tabAlreadyExists = localStorage.getItem('tab-name');

const openCityHandle = function() {
	const targetTabName = this.dataset.tabName;

	contents.forEach(content => {
		const tabName = content.dataset.tabName;
		const display = targetTabName === tabName ? 'block' : 'none';
		content.style.display = display;
	});
	
	tablinks.forEach(tab => {
		const tabName = tab.dataset.tabName;
		const action = targetTabName === tabName ? 'add' : 'remove';
		tab.classList[action]('active');
	});
	
	localStorage.setItem('tab-name', targetTabName);
};

const openCityFromLocalStorageHandle = (tabName) => {
	const tab = document.querySelector(`button.tablinks[data-tab-name="${tabName}"]`);
	const content = document.querySelector(`.tabcontent[data-tab-name="${tabName}"]`);
	
	tab.classList.add('active');
	content.style.display = 'block';
};

if (tabAlreadyExists)
	openCityFromLocalStorageHandle(tabAlreadyExists);

tablinks.forEach(tablink => tablink.addEventListener('click', openCityHandle));

	
body {
  font-family: Arial;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<h2>Tabs</h2>
<button onclick="location.reload()">reload</button>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
	<button class="tablinks" data-tab-name="London">London</button>
	<button class="tablinks" data-tab-name="Paris">Paris</button>
	<button class="tablinks" data-tab-name="Tokyo">Tokyo</button>
</div>

<div class="tabcontent" data-tab-name="London">
	<h3>London</h3>
	<p>London is the capital city of England.</p>
</div>
<div class="tabcontent" data-tab-name="Paris">
	<h3>Paris</h3>
	<p>Paris is the capital of France.</p>
</div>
<div class="tabcontent" data-tab-name="Tokyo">
	<h3>Tokyo</h3>
	<p>Tokyo is the capital of Japan.</p>
</div>

推荐阅读