<!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. unity监听粒子播放结束

    需要在粒子上挂脚本 脚本添加代码 public void OnParticleSystemStopped() { Debug.Log("粒子停止"); } 这是个生命周期 粒子的 ...

  2. docker安装mysql(Baas)

    Docker安装mysql 5.7版本 //拉取mysql镜像 docker pull mysql:5.7 下载完成后,在本地镜像列表里查到REPOSITORY为mysql,标签为5.7的镜像. do ...

  3. index.html（xpath素材）

    <bookstore> <title>新华书店</title> <book href="http://www.langlang2017.com/&q ...

  4. RSTP基础配置

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

  5. java基础知识部分知识点

    1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本  2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文 ...

  6. vue 还原Data里面的数据

    this.$data包含现有的data数据, this.$options.data()中是原有的data数据 还原代码 Object.assign(this.$data.searchForm, thi ...

  7. P2672跳石头

    这是2015noip的一道二分答案的题目,看了题解才会,, 题目给出石头的位置并且让你踩着石头往前跳,最多删掉m个石头还可以顺利通过,求解最短跳跃距离的最大值. 那么二分什么呢:mid为跳跃的长度.那 ...

  8. HNUSTOJ-1690 千纸鹤

    1690: 千纸鹤 时间限制: 1 Sec  内存限制: 128 MB提交: 992  解决: 296[提交][状态][讨论版] 题目描述  圣诞节快到了,校园里到处弥漫着粉红色的气息.又是一个情侣秀 ...

  9. Centos 修改当前路径显示为全路径

    1.修改显示全路径: vim /etc/bashrc 找到[ "$PS1" = "\\s-\\v\\\$ " ] && PS1="[\ ...

  10. CentOS7.6下设置mysql服务开机启动

    在centos7中所有对服务的管理都集中到了systemctl当中,所以服务的启动.关闭.重启.开机启动等等的操作都可以用systemctl. systemctl对服务的管理都是通过配置文件,配置文件 ...