<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #list { width: 150px; margin: 20px auto; } #list a { display: block; width: 100%; height: 40px; background: #ccc; margin-top: 10px; color: #fff; text-align: center; line-height: 40px; cursor: pointer; } #list li:hover { background-color: #FFE17B; } #list .active { background-color: orange; } </style> </head> <body> <ul id="list"> <a href="#">Javascript</a> <a href="#">Gulp</a> <a href="#">Angular</a> <a href="#">Bootstrap</a> <a href="#">Jquery</a> </ul> </body> <script> window.onload = function() { var index = 0; var oList = document.getElementById('list'); var aA = oList.getElementsByTagName('a'); var url = window.location.href; // 初始化頁面 init(); // 先寫一個功能函數，從鏈接地址中獲取 index 的值 function getIndex(url, key) { if (!url) { return; } var arr = url.slice(url.indexOf('?') + 1).split('&'); return function() { for(var item in arr) { var otherArr = arr[item].split('='); if (otherArr[0] == key) { return otherArr[1]; }; } }(); } // 再寫一個初始化函數,這個例子中比較簡單，只需知道哪一個按鈕是當前狀態 function init() { index = getIndex(url, 'index') ? getIndex(url, 'index') : 0; var i = 0, len = aA.length; for(; i<len; i++) { aA[i].className = ''; // 根據不同情況處理一下url,然后給href設置上值，你也可以直接在a標簽中添加鏈接，記得要加上index參數 if (url.indexOf('?') > -1) { if (url.indexOf('index=') > -1) { url = url.replace(/index=\d*/g, 'index='+i); } else { url += '&index='+i; } } else { url += '?index='+i; } aA[i].setAttribute('href', url); } aA[index].className = 'active'; } } </script> </html>
簡單寫了一個例子，演示了index通過鏈接傳遞，是往自己的頁面跳轉。如果你想跳轉到其他頁面，將url改一改就行了
來自：https://segmentfault.com/q/1010000003976809 遇見波同學的回答