代码为片段, 需要自行设置全部环境方可全部运行.

案例背景

  • 使用Ext开发了一个表格,需要根据一列值来动态设置颜色. 效果如下:

    <a>多颜色标签点击之后保持原色的一次实践, Ext Panel下解决及通用方案思路
    • 说明: 不同行显示不同的内容, 作为标题行, 可以点击链接到其他地方.
  • 相应的代码如下
  •   if (record.data.OQMYWGWJSFX <= 0) {
    return Ext.String.format("<a class='company-link' href='#' onclick='Win_DataSources_Show(\"" + record.data.OrgID + "\")'>{0}</a>", record.data.OrgName);
    }
    else {
    return Ext.String.format("<a class='company-link' href='#' style='color:red' onclick='Win_DataSources_Show(\"" + record.data.OrgID + "\")'>{0}</a>", record.data.OrgName);
    }

关键在于<a> 链接点击之后默认会变色,可以通过伪类的方式去修改。例如:

a:link { text-decoration: none; color: Black; }
a:active { text-decoration: blink; }
a:hover { text-decoration: underline; }
a:visited { text-decoration: none; }

问题来了, 如何保证红色链接点击之后还是红色, 黑色的链接点击之后还是黑色呢?

解决方法的总结

href 变更法。

  • javascript:void(0)方式可以屏蔽跳转作用,也就是说从href = '#' => href = 'javascript:void(0)' 之后可以保持原本的颜色不变。

render函数触发强制颜色变更.

  • 在使用render时生成的链接设置出发在最后,比伪类定义的还要晚。 本例中的代码: Ext.String.format("<a class='company-link' href='#' style ='color:gray' 。。。
    • Ext中的render 也是采用js的方式实现,

总结

  • 回归标题,如何使多颜色的 <a>标签点击之后保持原色,本例中如果是通用的网页, 且在当前页,可以使用javascript:void(0) 来替换'#' 完成页面的重新定向。
  • 如果在Ext 框架下可以使用列的Render事件定义,完成逻辑定义
  • 更通用的情况,普通网页不同颜色跳转的方式,目前没有遇到,我想到的解决路径就是:
    • 定义不同颜色的<a>标签为不同class,这样在配合伪类使用的过程中,可以采用.class a:visited的方式去过滤显示与原本的颜色相同。
    • 使用属性选择器<a>[color:red]:visited 这样的方式去定义访问之后的颜色。

      如上通用的办法未验证,有知道的,或感兴趣可自行尝试。