Document #list { width: 150px; margin: 20px auto; } #list a { display: block; width: 100%; height: 40px; background: #ccc; mar" />
当前位置: 首页 >网站问题

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

网站问题 2018-6-1 阅读量: 412 TAG:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
< !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';
        }

    }
</len></script>
</html>

来源:(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!

相关信息

本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。

如有需要请加QQ: 909912499