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

网站问题 2018-6-1 阅读量: 554 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），欢迎分享本文，转载请保留出处！部分内容来自网络，如有侵权请联系删除处理！

邦林织梦

热门文章

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

相关信息

关于本站

联系我们

友情链接