主頁點A圖示變色,點B圖示變色且A顏色恢復無色
阿新 • • 發佈:2018-11-04
<!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
有所幫助就頂一下吧!