<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./index.js"></script>
<style>
.ac {
background-color: red;
}
.cont {
width: 200px;
height: 200px;
border: 1px solid #000;
display: none;
}
</style>
</head>
<body>
<div class="box">
<button class="item ac">按钮1</button>
<button class="item">按钮2</button>
<button class="item">按钮3</button>
<div class="cont" style="display:block ;">内容1</div>
<div class="cont">内容2</div>
<div class="cont">内容3</div>
</div>
</body>
<script>
window.onload = () => {
var btn = document.querySelectorAll('.box button')
var con = document.querySelectorAll('.box div')
let num = 0
tab = (num) => {
for (var i = 0; i < btn.length; i++) {
btn[i].className = ''
con[i].style.display = 'none'
}
btn[num].className = 'ac'
con[num].style.display = 'block'
}
for (var i = 0; i < btn.length; i++) {
btn[i].index = i
btn[i].onclick = function () {
tab(this.index)
set('TabValue', this.index)
}
}
if (get('TabValue')) {
num = get('TabValue')
tab(num)
}
}
</script>
</html>
引入的js
function set(name, value, iDay) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = `${name}=${value}; path=/;expires=${oDate}`;
}
function get(name) {
let arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
let item = arr[i].split('=');
if (item[0] == name) {
return item[1];
}
}
}
function deleteCookie(name) {
setCookie(name, 'ccc', -1)
}