<!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. 转：【开源必备】常用git命令

    原文:https://zhuanlan.zhihu.com/p/25868120 [开源必备]常用git命令 [已重置]   如今在技术领域,码农们习惯了开源,也离不开免费开源的代码,轻松获取代码,不 ...

  2. vue引入query

    1 首先先安装query.(cnpm install query --save-dev)或者 在package.json里的dependencies加入"jquery" : &qu ...

  3. rename批量修改文件名

    批量改名: 如文件,批量修改,把hello去掉[root@localhost wang]# ll-rw-r--r-- 1 root root 0 5月 14 02:36 a.hello.txt-rw- ...

  4. (已实践)PLSQL本地还原Oracle数据库dmp文件

    这个方法很烂,导致重装Oracle时候处处出现问题,不建议使用这个方法,除非你以后不再用Oracle这个软件了,这个方法很烂,再评论一下. 第一,启动服务,(如果数据库处于启动状态,那么略过这一步) ...

  5. MySQL数据库的连接池问题

    3. sqlalchemy设置连接池数量上限设置 SQLALCHEMY_POOL_SIZE = 100 SQLALCHEMY_MAX_OVERFLOW = 0 # 超出连接池数量的连接后,最多可以连接 ...

  6. 多线程15-ReaderWriterLockSlim

        ));         }         );                     rwl.EnterUpgradeableReadLock();                     ...

  7. Vue 实现手动刷新组件

    Vue 实现手动刷新组件:https://www.jianshu.com/p/742142dc95f3

  8. Luogu P4040 [AHOI2014/JSOI2014]宅男计划

    题目 显然存活天数与叫外卖次数的函数是凸函数. 所以三分买外卖的次数. 然后把食品按保质期升序排序. 并且单调栈搞一下,把又贵又保质期短的丢掉. 那么随着保质期的增加,食品的价格一定上涨. 所以我们从 ...

  9. wordpress开发的一些积累

    wordpress 攒知识点 记录开发 wordpress 的一些技能点,以备不时之需 短代码 Shortcode 虽然很多插件都是提供,直接在代码中插入类似[Shortcode] 便可以生效,但是很 ...

  10. offsetWidth clientWidth scrollWidth 的区别

    了解 offsetWidth clientWidth scrollWidth 的区别 最近需要清除区分开元素的width,height及相应的坐标等,当前这篇用来区分offsetWidth clien ...