A标签跳转链接并修改样式
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