<a>多颜色标签点击之后保持原色的一次实践， Ext Panel下解决及通用方案思路

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

案例背景

• 使用Ext开发了一个表格,需要根据一列值来动态设置颜色. 效果如下:
  
  • 说明: 不同行显示不同的内容, 作为标题行, 可以点击链接到其他地方.
• 相应的代码如下

•   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; }

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

• 网络搜索后发现很多人有同样的问题，思路无非2种：
  • CSS 支持相应的伪类，可以保持原本的颜色不变。 找啊找，没找到，此路不通。
  • 通过onclick事件，给当前<a>标签赋相应颜色属性。
  • 变通方式 本例中，发现链接是#即当前页的的页面顶部，索搜索中发现还有另外一种方式就是href='javascript:void(0)'这种方式是空链接，
    • 二者区别： http://www.uw3c.com/cssviews/css12.html
    • 加不加void(0)也有人讨论：http://www.zhangxinxu.com/wordpress/2013/01/why-use-href-javascript-void0/

解决方法的总结

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 这样的方式去定义访问之后的颜色。
    如上通用的办法未验证，有知道的，或感兴趣可自行尝试。