<!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. c++ 事件回调 java

    #pragma once #ifdef __cplusplus extern "C" { #endif typedef void(*sig_t)(int); int FirstEl ...

  2. vue仿阿里云后台管理(附加阿里巴巴图标使用)

    先看下页面截图,在线演示地址http://aliadmin.zengjielin.top 下面有开源的代码 页面分成三大部分头部,头部菜单栏,侧边菜单栏,右侧内容栏. 现在我们担心的是怎么使用侧边栏. ...

  3. [转帖]100G QSFP28与CFP,CFP2,CFP4光模块的比较

    100G QSFP28与CFP,CFP2,CFP4光模块的比较 https://www.eefocus.com/etulink/blog/17-09/423967_5c520.html 数据中心网络发 ...

  4. PY个快速模

    既然这道题是数学题,那就用 PY 吧! 学点东西: print 可以和 c++ 中的 printf 一样快乐的输出格式 另外一点: 这道题可能数据不够强?想想应该有一个 \(0^0 ~\%~ k =0 ...

  5. java字符流读取文件

    package ba; import java.io.*; public class zifuTest { public static void main(String[] args) { FileI ...

  6. Android 点击跳转到蓝牙设置界面

    不再重写一遍了,看csdn: https://blog.csdn.net/qq_42866164/article/details/101353709

  7. win10文件夹共享

    1.开启server服务就可以使用net share 命令 2.查看目前已共享的文件夹 3.关闭默认共享 只有用administrator(且有密码)才能连上win10上的默认共享了,只有admini ...

  8. De Moivre–Laplace theorem

    网址:https://en.wikipedia.org/wiki/De_Moivre%E2%80%93Laplace_theorem De Moivre–Laplace 中心极限定理的证明.主要用到s ...

  9. JVM Direct Memory

    JVM除了堆内存.栈内存,还有DirectMemory内存,DirectMemory是java nio引入的. 在JDK1.4中新加入了NIO(New INput/Output)类,引入了一种基于通道 ...

  10. Azure Messaging

    上篇博文中我们介绍了Azure ServiceBus Messaging的消息事务机制: Azure Messaging-ServiceBus Messaging消息队列技术系列7-消息事务(2017 ...