a标签点击跳转页面后怎么给当前点击的a标签添加样式

发表于 | 分类于

在写项目的时候碰到一个问题:
a标签点击跳转页面后,给当前点击的a标签添加的样式不会显示。
怎么解决呢？

问题样式图

问题描述

原本点击仪表盘等标签后，该标签的背景颜色会发生改变，可点击之后，a标签会发生跳转，该标签的背景色也不会再显示。

XML/HTML code：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<aside class='aside'>
		<div class='profile'>
			<div class='avatar img-circle'>
				<img src='./uploads/avatar.jpg' alt='您的头像'>	
			</div>
        <h4><span >胡大大</span></h4>
		</div>
		<div class='navs'>
			<ul>
				<li><a href='dashboard.html'><i class='fa fa-bar-chart '></i>仪表盘</a></li>
				<li><a href='#' ><i class='fa fa fa-user'></i>用户管理</a></li>
				<li><a href='./index.html'><i class='fa fa-mortar-board'></i>讲师管理</a></li>
				<li>
					<a href='#' class='course_click'>
						<i class='fa fa-book'></i>课程管理<i class='arrow fa fa-angle-right pull-right'></i>
					</a>
					<ul class='course ' style='display:none'>
						<li><a href='#'>课程添加</a></li>
						<li><a href='#'>课程列表</a></li>
						<li><a href='#'>课程分类</a></li>
						<li><a href='#'>课程专题</a></li>
					</ul>
				</li>
				<li><a href='#'><i class='fa fa-link'></i>广告管理</a></li>
				<li>
					<a href='#'  class='course_click'>
						<i class='fa fa-cog fa-spin'></i>系统设置<i class='arrow fa fa-angle-right pull-right'></i>
					</a>
					<ul class='course ' style='display:none'>
							<li><a href='#'>网站设置</a></li>
							<li><a href='#'>权限管理</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</aside>

那么怎么解决呢？

一般使用以下几种方法:

  1. 用cookie记录这个打开的序列号，然后页面在跳转的时候再读出来。

  2. 循环a的链接，然后与location.href去比对，如果相同，或包含有同样字符串序列，则添加className.

  3. 给每个页面写一个页面的id值，然后每次判断，有值则addClass

    1
    2
    给url后面加一个参数，比如a.php？1，取url后面的1，判断对应的是第一个导航添加一个选中的class
    实际网站中，通常用php做页面判断，判断为是，则相应的a解析出来有active样式，判断为否则a中的active样式不解析

个人比较推荐第二种写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 方法1
$(document).ready(function () {
    var url = window.location.href;
    $('.navs li a').each(function () {
        var userUrl = returnFileName($(this).attr('href')) + returnUrl($(this).attr('href'));
        var windowUrl = returnFileName(url) + returnUrl(url);
        if (userUrl == windowUrl ) {
            $(this).addClass('active');
        }
    });
    //以下为截取url的方法
    function returnUrl(href) {
        var number = href.lastIndexOf("/");
        return href.substring(number + 1);
    }
    function returnFileName(href) {
        var number1 = href.lastIndexOf("/");
        var number2 = href.substring(0, number1).lastIndexOf("/");
        return href.substring(number1, number2 + 1);
    }
})
// 推荐这一种写法
$(document).ready(function () {
    $('.navs li a').each(function () {
            if ($($(this))[0].href == String(window.location))
                $(this).addClass('active').attr('href', 'javascript:void(0);');
        });
    })