历史版本20 :超级链接改变颜色 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 预期效果

  • 点击变色:点击超链时,超链文本变色,表示这个超链已经被点过,效果如下图所示:

1630549736992528.gif

  • 悬浮变色,离开恢复:鼠标悬浮在超链文本上方时,文本变色,鼠标指针离开文本,颜色恢复到超链原来的蓝色。

1630549960239000.gif

1.2 实现思路

  • 普通报表:预览方式页面设置下添加加载结束事件。

  • 决策报表:报表块添加初始化事件。

2. 方案编辑

2.1 普通报表

以什么方式预览报表,就在对应的预览方式设置页面下添加加载结束事件,如下图所示:

1630551410480567.png

1)点击变色 JavaScript 代码如下:

$('.linkspan').mousedown(function(){$(this).css('color','red');}); //鼠标点击 

2)悬浮变色,离开恢复 JavaScript 代码如下:

$('.linkspan').mouseover(function(){$(this).css('color','red');}); //鼠标移上
$('.linkspan').mouseleave(function(){$(this).css('color','blue');}); //鼠标离开

注:不支持移动端预览。

2.2 决策报表

给超链所在报表块添加初始化事件,如下图所示:

1630552378439550.png

1)点击变色 JavaScript 代码如下:

setTimeout(function() {
$("span.linkspan").bind("click",function() {$(this).css("color", "red");})
}, 100); //点击变色

2)悬浮变色,离开恢复 JavaScript 代码如下:

setTimeout(function() {
$("span.linkspan").mouseover(function() {$(this).css("color", "red");}) //悬浮变色
$("span.linkspan").mouseleave(function() {$(this).css("color", "blue");}) //离开恢复
}, 100);

注:不支持移动端预览。