A标签跳转链接并修改样式
2024-09-05 20:01:47
<!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 遇见波同学的回答
最新文章
- Mac下搭建php开发环境教程
- php 上传大文件主要涉及配置upload_max_filesize和post_max_size两个选项
- C++简单使用Jsoncpp来读取写入json文件
- OpenCV 3.0 VS2010 Configuration
- Bugs及解决方案列表
- 修改Delphi工具控件的默认字体
- 关于qq创始人----马化腾的一些琐事
- 【计算几何初步-线段相交】【HDU1089】线段交点
- HTTPclient cookie的获取与设置
- 免费SSL证书PK付费SSL证书 花落谁家
- 机器翻译评测——BLEU算法详解
- CDN工作机制和负载均衡
- ALTER TABLE causes auto_increment resequencing, resulting in duplicate entry ’1′ for key ‘PRIMARY’
- [HDFS Manual] CH2 HDFS Users Guide
- protobuff 编译注意事项
- json和jsonp的使用区别
- js对象合并
- flume使用之httpSource
- frame嵌套页面元素的定位
- POJ 2887