一、场景

最近做重构，有一个功能是，鼠标点击链接后显示不同样式：

代码如下，样式布局我修改后如下，使用bootstrap框架来做。

starof test
          starof    
page1
page2
page3

现在重点说一下：功能实现。

原来代码是这样实现链接点击样式的，给每个链接不同的class，

page1
page2
page3

然后在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重构

代码如下：

    
          
          starof test    
          
                 starof    
    
               
        page1
        
        page2
        
        page3

三、类似的效果

实现方式如下：通过判断用户请求的url和是哪个，就给哪个添加active样式。


              
       
                    {% url "addpermissionurl" as theaddpermissionurl %}            
        新建权限            {% url "listpermissionurl" as thelistpermissionurl %}            
        权限列表

本文作者,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。