当前位置:Gxlcms > html代码 > 导航点击选中效果重构_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:2人阅读

一、场景

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

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

            starof test    

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

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

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

三、类似的效果

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

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

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

人气教程排行