代码如下，样式布局我修改后如下，使用bootstrap框架来做。
doctype html>html lang=zh-cn>head> meta charset=utf-8 /> link href=css/bootstrap.min.css rel=stylesheet> title>starof testtitle> style type=text/css>.menu{border-radius:4px;background-color:#f8f8f8;padding:10px;margin-top:30px;}.menu p{font-size:26px;margin-bottom:25px;color:#76caea;padding-left:30px;margin-top:15px;}.menu .nav-pills > li > a:hover{background-color:#8fd4e6;}/*page1.html页面定义*/.menu01{background-color:#5dc1d1;border-radius:4px;}/*page2.html页面定义*//*.menu02{background-color:#5dc1d1;border-radius:4px;}*//*page3.html页面定义*//*.menu03{background-color:#5dc1d1;border-radius:4px;}*/ style>head>body>div class=col-md-2 menu> p> span class=glyphicon glyphicon-user>span> span>starofspan> p> ul class=nav nav-pills nav-stacked> li class=menu01>a href=page1.html>page1a>li> li class=menu02>a href=page2.html>page2a>li> li class=menu03>a href=page3.html>page3a>li> ul>div>body>html>
view code
现在重点说一下：功能实现。
原来代码是这样实现链接点击样式的，给每个链接不同的class，
li class=menu01>a href=page1.html>page1a>li>li class=menu02>a href=page2.html>page2a>li>li class=menu03>a href=page3.html>page3a>li>
然后在page1.html页面定义：
.menu01{background-color:#5dc1d1;border-radius:4px;}
同理在page2.html页面定义：
.menu02{background-color:#5dc1d1;border-radius:4px;}
在page3.html页面定义：
.menu03{background-color:#5dc1d1;border-radius:4px;}
menu菜单这个模块是page1.html，page2.html，page3.html三个页面公共模块，通过include来共享。这样在调用不同页面时，其他链接的样式不生效。所以可以实现被点击的链接显示不同样式的效果。
但是这样的做法是非常糟糕的。同一个样式有多少个页面就重写多少次，不同class名称对应的却是同样的样式。
这样的代码我是无法忍受的。下面用一小段js来实现同样功能。
二、用js重构代码如下：
doctype html>html lang=zh-cn>head> meta charset=utf-8 /> link href=css/bootstrap.min.css rel=stylesheet> title>starof testtitle> style type=text/css>.menu{border-radius:4px;background-color:#f8f8f8;padding:10px;margin-top:30px;}.menu p{font-size:26px;margin-bottom:25px;color:#76caea;padding-left:30px;margin-top:15px;}/*下面这样写是为了提高选择器的优先级*/.menu .nav-pills > li > a:hover{background-color:#8fd4e6;}.clickstyle{background-color:#5dc1d1;border-radius:4px;} style>head>body>div class=col-md-2 menu> p> span class=glyphicon glyphicon-user>span> span>starofspan> p> ul class=nav nav-pills nav-stacked> li>a href=#>page1a>li> li>a href=#>page2a>li> li>a href=#>page3a>li> ul>div>script type=text/javascript> var olis=document.getelementsbytagname(li); var i,j; var length=olis.length; for(i=0;ilength;i++){ olis[i].onclick=function(){ for(j=0;jlength;j++){ olis[j].classname=; } this.classname+=clickstyle; } }script>body>html>
三、类似的效果
实现方式如下：通过判断用户请求的url和是哪个，就给哪个添加active样式。
div class=btn-toolbar> div class=btn-group> {% url addpermissionurl as theaddpermissionurl %} a class=btn btn-default {%if request.path = theaddpermissionurl%} active {%endif%} href={{ theaddpermissionurl }}>span class=glyphicon glyphicon-edit>span>新建权限a> {% url listpermissionurl as thelistpermissionurl %} a class=btn btn-default {%if request.path = thelistpermissionurl%} active {%endif%} href={{ thelistpermissionurl }}>span class=glyphicon glyphicon-list>span>权限列表a> div> div>
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4612411.html有问题欢迎与我讨论，共同进步。