<!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标签跳转链接并修改样式的更多相关文章

  1. 总结：js中4类修改样式的方法

    前言 最近在写一个扩展右键菜单的插件,既然是插件,想着一步到位,把相关的style样式设置都丢进js文件中,直接加载一个js文件便可以使用该插件,所以今天就研究了下js批量的插入样式的方法,即addS ...

  2. JavaScript基础之DOM修改样式

    1.获取或设置元素的内容:3个属性:   1. innerHTML: 获取或设置元素开始标签到结束标签之间的所有HTML代码原文.      何时使用:只要获得完整的html代码原文时      优化 ...

  3. 【写一个自己的js库】 5.添加修改样式的方法

    1.根据id或class或tag修改样式,样式名是-连接格式的. function setStyleById(elem, styles){ if(!(elem = $(elem)) return fa ...

  4. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  5. js修改样式表规则

    <div>adasfsfs</div> <div id="div">adasfsfs</div> <div>adasfs ...

  6. vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案

    在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...

  7. vue 使用v-html指令渲染的富文本无法修改样式的解决方法

    最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式 解决方法: 把需要添加或重置的样式单独放在一个style标签里, 定义为全局样式,代码如下: <style> ...

  8. JQuery动态修改样式

    JQuery动态修改样式 SetStyle(); function SetStyle() { $(".toolbar").remove(); $(".placeholde ...

  9. JavaScript初步学习----基本使用，简单事件，修改样式，数据类型

    JavaScript基本使用 JavaScript原名叫livescript,是一门动态类型,弱类型基于原型的脚本语言   用于页面特效,前后交替,后台开发(node)   JavaScript写在s ...

随机推荐

  1. Ubuntu 16.04 设置静态IP 注意事项

    目录 查看动态ip下的网络信息 查看默认网关 设置静态网络 查看动态ip下的网络信息 1 ifconifg # 查看网卡信息: 可以看出网口名称为 eno1, 以及子网掩码(mask) 查看默认网关 ...

  2. java中public、private、protected区别

    类中的数据成员和成员函数据具有的访问权限包括:public.private.protect.friendly(包访问权限) 1.public:public表明该数据成员.成员函数是对所有用户开放的,所 ...

  3. RSTP基础配置

    本实验模拟公司网络场景.S3和S4是接入层交换机,负责用户的接入,S1和S2是汇聚层交换机,四台交换机组成一个环形网络.为了防止网络中出现环路,产生网络风暴,所有交换机上都需要运生成树协议.同时为了加 ...

  4. [转帖]探秘华为（二）：华为和H3C（华三）的分道扬镳

    探秘华为(二):华为和H3C(华三)的分道扬镳 https://baijiahao.baidu.com/s?id=1620781715767053734&wfr=spider&for= ...

  5. C++自学教程第一课——你好世界，我是柠檬鲸。

    C++系列教程现在在自己学校的一个博客平台发布,几个朋友一起搭建的 [C++基础教程系列](https://blog.ytmaxoj.org/cpp_basic_liuary-0/) 下面是原来的正文 ...

  6. HNCPC2019H 有向图

    题目 设\(f_i\)表示经过\(i\)的期望次数.那么显然答案\(ans_j=\sum\limits_{i=1}^nf_iP_{i,j}\). 我们可以轻松地列出转移式子: \[ f_1=\sum\ ...

  7. 图——图的Prim法最小生成树实现

    1,运营商的挑战: 1,在下图标出的城市间架设一条通信线路: 2,要求: 1,任意两个城市间都能够通信: 2,将架设成本降至最低: 2,问题抽象: 1,如何在图中选择 n - 1 条边使得 n 个顶点 ...

  8. 使用before和after双伪元素清除浮动

    使用方法: .clearfix:before,.clearfix:after { content:"."; display:table; } .clearfix:after { c ...

  9. 动态规划: HDU1003Max Sum

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  10. nginx运行出现 file not found 错误处理原因

    在阿里云装nginx+php+mysql nginx运行出现 file not found 错误处理原因 1,第一情况 location ~ \.php$ { # root html; fastcgi ...