<!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 遇见波同学的回答