糊糊的前端学习笔记——a标签点击跳转页面后，为被点击的a标签添加样式【Day1】

本人前端小白一枚，初步接触前端知识一个月。从今天开始将在博客上分享一下我每日工作中遇到的一些问题和相应的解决，以帮助自己更好的学习和成长。


今天在制作网页顶部公共导航时，遇到这样一个问题，我需要在a标签点击跳转页面后，为被点击的a标签添加样式。
增添样式如下：

.selected{ display:block;background-color: #E31D2C;color:#fff;}

刚开始js我是这样写的：

$(".top_menu li a").on("click", function () {   $(this).addClass("selected").siblings().removeClass("selected");});

发现由于页面跳转，a的默认target属性为_self，即跳转页面载入当前框架集和窗口中，只有在跳转的瞬间能看到所写样式生效。
于是我将target修改为_blank，能发现新窗口中样式不生效，旧窗口中样式已经起效。
经过搜集资料，我找到了合适的解决方法。


（该答案来自网络，如果侵权请联系本人删除相关内容）
有几种办法：
1. 用cookie记录这个打开的序列号，然后页面在跳转的时候在读出来。
2. 循环a的链接，然后与location.href去比对，如果相同，或包含有同样字符串序列，则添加className.
3. 给每个页面写一个页面的id值，然后每次判断，有值则addClass

我选择了第二种方法，于是我修改自己的js如下：

    var url = window.location.href;    $("a").each(function () {        if (returnUrl($(this).attr("href")) == returnUrl(url)) {            console.log($(this));            $(this).addClass("selected");        }    });    //以下为截取url的方法    function returnUrl(href) {        var number = href.lastIndexOf("/");        return href.substring(number + 1);    }

该方法主要是通过截取url中"/"后的内容，与a中href的跳转地址进行对比，如果一致，则该a标签添加selected样式。

确实还有很多简便可用的方法，今天我只试用了这一种。

下次我会尝试在各个链接上面都加个参数，获取这个参数并匹配到对应的菜单上的方法。