<!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. OutLook会议室预定提醒

    项目组采用敏捷开发管理,每两周一个迭代.写个工具做会议室预定. 代码下载:https://download.csdn.net/download/linmilove/10547579 Appointme ...

  2. Java ——运算符

    本节重点思维导图 递增递减 前缀自增自减法(++a,--a): 先进行自增.减运算,再进行表达式运算 后缀自增自减法(a++,a--): 先进行表达式运算,再进行自增.减运算 例[1]: int a ...

  3. bug大致分类及如何定位

    前端 一.概念:网站的静态页面设计,网站前端工作使用的是html.css.javascript等技术设计网站页面的样式和排版布局,这就是网站前端. 二.Bug类别 1.HTML:出现文本的问题基本都是 ...

  4. 20191128 Spring Boot官方文档学习（9.11-9.17）

    9.11.消息传递 Spring Boot提供了许多包含消息传递的启动器.本部分回答了将消息与Spring Boot一起使用所引起的问题. 9.11.1.禁用事务JMS会话 如果您的JMS代理不支持事 ...

  5. centOs 常用操作

    centos 官网下载:https://www.centos.org/download/从官网下载iso,教程:https://jingyan.baidu.com/article/1876c85279 ...

  6. sql语句传参数

    SET @register = '; SET @unregister = '; UPDATE cw_base_register SET register = @register, unregister ...

  7. C++ 14 auto

    C++14标准最近刚被通过,像以前一样,没有给这个语言带来太大变化,C++14标准是想通过改进C++11 来让程序员更加轻松的编程,C++11引入auto关键字(严格来说auto从C++ 03 开始就 ...

  8. I-最短的名字

    在一个奇怪的村子中,很多人的名字都很长,比如aaaaa, bbb and abababab. 名字这么长,叫全名显然起来很不方便.所以村民之间一般只叫名字的前缀.比如叫’aaaaa’的时候可以只叫’a ...

  9. 分布式事务——幂等设计(rocketmq案例)

    幂等指的就是执行多次和执行一次的效果相同,主要是为了防止数据重复消费.MQ中为了保证消息的可靠性,生产者发送消息失败(例如网络超时)会触发 "重试机制",它不是生产者重试而是MQ自 ...

  10. 剑指offer-二叉搜索树的第k个结点树-python

    二叉查找树(Binary Search Tree),(又:二叉搜索树,二叉排序树)它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若它的 ...