导航点击选中效果重构-starof

一、场景

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

代码如下，样式布局我修改后如下，使用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
 
 
 
page1
 
page2
 
page3
 

三、类似的效果

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

 

 

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

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