导航点击选中效果重构_html/css_WEB-ITnose

一、场景

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

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

    
          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    
    

三、类似的效果

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

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

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