A标签跳转链接并修改样式

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

A标签跳转链接并修改样式

相关推荐