首页 >

JS实现选中Tab标签后 切换图标

需求:

tab组件共有3个tab页,每个tab页有一个对应图标,选中某一个tab页,择图标变为选中后图标

实现脚本:

/**

defaultIcon:默认tab页签图标数组,按tab页签顺序添加数组元素

clickIcon:点击后tab页签图标样式数组,同样按tab页签顺序添加数组元素

注意:图标地址需要用单引号引起

**/

var defaultIcon=["ebi/images/misc/1.gif","ebi/images/misc/2.gif","ebi/images/misc/3.gif"];

var clickIcon=["ebi/images/misc/20.gif","ebi/images/misc/21.gif","ebi/images/misc/23.gif"];

//默认计算后,被选中的图标设置为点击后图标样式(此处HHH3为tab组件ID,根据实际情况进行修改)

$("#HHH3 .xtab-header-content li").each(function(index,element){

$(element).filter(".xtab-header-active").find("img").attr("src",clickIcon[index]);

});

//点击后实现点击tab页签图标的变化,以及其他非点击状态图标样式的恢复(此处HHH3为tab组件ID,根据实际情况进行修改)

$("#HHH3 .xtab-header-content").click(function(){

$("li").each(function(index,element){

$(element).find("img").attr("src",defaultIcon[index]);

});

$("li").each(function(index,element){

$(element).filter(".xtab-header-active").find("img").attr("src",clickIcon[index]);

});

});

 

 

具体导入如下报表模板对象:

 tab标签变化.zip

附件列表

0

文档内容仅供参考
如果您需要解决具体问题,还可以登录亿信社区
在提问求助板块提问,30分钟内帮您解决问题

如果您认为本词条还有待完善,请编辑

上一篇单位级次下拉默认选择第一个节点

下一篇专有名词

请先登录

创建词条

词条信息

admin
admin

超级管理员|词条创建者

1543

浏览次数:800 次

更新时间:2018-10-12