<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="css/hui.css" />
<style>.btn{background-color:#999999;}</style>
</head>
<body>
<header class="hui-header" id="header">
<h1 style="margin-left: 44px;">Demo</h1>
</header>
<div class="hui-wrap">
<div class="hui-speed-dial">
<ul >
<li id="sub_1" onclick="changeColor('1')">
<a href="1.html">
<img src="img/1.png" /> <br/>
測試1
</a>
</li>
<li id="sub_2" onclick="changeColor('2')">
<a href="2.html">
<img src="img/2.png" /> <br/>
測試2
</a>
</li>
<li id="sub_3" onclick="changeColor('3')">
<a href="3.html" >
<img src="img/3.png" /> <br/>
測試3
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="js/hui.js" type="text/javascript" charset="utf-8" ></script>
<script type="text/javascript">
// 根據localStorage保存的序號變色
var storage = window.localStorage;
var numjson = storage.getItem('numdata');
var _num = JSON.parse(numjson);
if(_num.number){
select = _num.number;
document.getElementById('sub_' + select).className='btn'
}
// 點擊變色並保存點擊的序號到localStorage
function changeColor(num) {
numdata={
number:num,
};
number = JSON.stringify(numdata);
storage.setItem('numdata',number);
for (var i = 1; i <= 3; i++) {
var str = document.getElementById('sub_' + i);
if (i == num) {
str.className = "btn";
} else {
str.className = "";
}
}
}
</script>
</body>
</html>
借鑑：https://zhidao.baidu.com/question/347200786.html
有所幫助就頂一下吧！