关于js设置标签样式来显示图片背景无效的解决方案
2008-12-17 12:48
681 查看
在页面里使用了切换效果。背景图片的显示是通过js来设置标签样式来控制的。但是写了没有效果。只能显示第一个tab的。
html:
<div class="col">
<div class="zynav" id="JY">
<div class="z1 curr1"><a href="javascript:;"><span>骑士</span></a></div>
<div class="z2"><a href="javascript:;""><span>魔法师</span></a></div>
<div class="z3"><a href="javascript:;"><span>治愈师</span></a></div>
</div>
<div id="NS" class="dzylist qs mfs zys">
<div class="info">
姓名: 吉克<br />
年纪: 16岁<br />
身高: 175 CM<br />
职业: 骑士 <br />
<strong>【故事】</strong> 受到父亲的影响,而努力朝骑士之路前进的吉克,有着男
孩子率性认真的个性,勇敢投入冒险。当发现父亲留下的一张纸条,
记载着不为人知的魔法讯息,他便踏上了寻找谜团之路,因而也遇上
艾儿一行人,发展出吵吵闹闹的情愫… <br />
<br />
<strong>【特性】</strong> 身为骑士的吉克拥有较高的体力和防御力,是队伍中的坦
克和压制战况的重要角色。他能使用各种强力的连续技来牵制敌人,
技能特性包括:将敌人击飞、晕击、反击、攻击倒地的敌人等等。
除了一般挡住敌人的攻势之外,使敌人失去攻击的能力也是他的强项。
</div>
<div class="info" style="display:none;">
姓名: 丹恩<br />
年纪: 18岁 <br />
身高: 180 CM<br />
职业: 魔法师 <br />
<strong>【故事】</strong> 虽然年轻,却已是国家魔法师团精英,常被指派去执行棘手的任务。有着一头金红发色的丹恩,散发独特的贵气,加上太过俊俏的脸庞,常让他受到太多打扰,因此总是披着披风,低调的执行任务。被公主艾儿跟上,这回他恐怕很难太潇洒…<br />
<br />
<strong>【特性】</strong> 身为魔法师的丹恩,擅长使用冰、火、地三种元素魔法,加上可以使用快捷键实时回魔,施展不同效果的魔法,制造出强大的伤害。技能效果包含了:远距离、范围、定身、持续伤害等等,可从容因应各种战况,是不可或缺的主攻击角色。
</div>
<div class="info" style="display:none;">
姓名: 艾儿 <br />
年纪: 16岁 <br />
身高: 165 CM<br />
职业: 治愈师 <br />
<strong>【故事】</strong> 身为路尼亚王国的小公主,心地善良而单纯,虽然有时也会带点傲慢,想要表现自己的能力,却常常被拿跟姊姊莉儿公主比较,带着委屈和冒险的心情出走。离开了皇宫的艾儿,展现了她过人的治愈魔力,守护着众人的生命…<br />
<br />
<strong>【特性】</strong> 唯一拥有治愈能力的角色,拥有各种治愈技巧:单体、范围、复活、解状态等技能,搭配好用的技能「月之奉献」,可以将血量转换为魔力,让艾儿成为出名的打不死。魔法攻击虽然不强,却常带有击退的特性,非常适合辅助队友。在后期更是闯关不可或缺的重要职业
</div>
</div>
<div class="clear"></div>
</div>
js:
通过切换 骑士,魔法师 ,治愈师 来控制<div id="NS" class="dzylist qs mfs zys">的样式。显示左边的图片。结果只有默认的 骑士才能显示。
<script language="javascript">
var Browser = {
isIE:(navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),
isFirefox:navigator.userAgent.indexOf('Firefox') >= 0,
isOpera:navigator.userAgent.indexOf('Opera') >= 0
}
var jy={
S_obj:null,
D_obj:null,
Num:0,
ay:Array("qs","mfs","zys"),
init:function()
{
this.S_obj=$("JY");
this.D_obj=$("NS");
this.AddEventList();
this.DisplayControl(this.S_obj,this.D_obj,0);
},
DisplayControl:function(_Sobj,_Dobj,num)
{
var oldnum=jy.Num;
var j=jy.Num+1;
var k=num+1;
_Dobj.childNodes[oldnum].style.display="none";
_Sobj.childNodes[oldnum].className="z"+j;
_Dobj.className="dzylist "+ jy.ay[num];
_Dobj.childNodes[num].style.display="block";
_Sobj.childNodes[num].className="z"+k+" curr"+k;
jy.Num=num;
},
AddEventList:function()
{
for(i=0;i<this.S_obj.childNodes.length;i++)
{
var _objEvent=this.S_obj.childNodes;
if(Browser.isIE)
{
_objEvent.attachEvent("onclick",new Function("jy.DisplayControl(jy.S_obj,jy.D_obj,"+i+")"));
}
else
{
//_objEvent.attachEventListener("click",function(){var n=i;jy.DisplayControl(jy.S_obj,jy.D_obj,n)});
_objEvent.attachEventListener("click",new Function("jy.DisplayControl(jy.S_obj,jy.D_obj,"+i+")"));
}
}
}
}
jy.init();
</script>
问过一些资深的js专员都没有很好的解决方案。当时也就是想试试延迟执行代码来测试一下,看能不能达到想要的效果。
最后结果与预期的想法刚好。解决了我在写js代码控制样式这个一直存在的问题。
看个js代码:
DisplayControl:function(_Sobj,_Dobj,num)
{
//alert(num); //设置标签样式加载图片,会导致没有图片显示。 解决方案延迟执行js代码
setTimeout(function(){
var oldnum=jy.Num;
var j=jy.Num+1;
var k=num+1;
_Dobj.childNodes[oldnum].style.display="none";
_Sobj.childNodes[oldnum].className="z"+j;
_Dobj.className="dzylist "+ jy.ay[num];
_Dobj.childNodes[num].style.display="block";
_Sobj.childNodes[num].className="z"+k+" curr
},13);
}
html:
<div class="col">
<div class="zynav" id="JY">
<div class="z1 curr1"><a href="javascript:;"><span>骑士</span></a></div>
<div class="z2"><a href="javascript:;""><span>魔法师</span></a></div>
<div class="z3"><a href="javascript:;"><span>治愈师</span></a></div>
</div>
<div id="NS" class="dzylist qs mfs zys">
<div class="info">
姓名: 吉克<br />
年纪: 16岁<br />
身高: 175 CM<br />
职业: 骑士 <br />
<strong>【故事】</strong> 受到父亲的影响,而努力朝骑士之路前进的吉克,有着男
孩子率性认真的个性,勇敢投入冒险。当发现父亲留下的一张纸条,
记载着不为人知的魔法讯息,他便踏上了寻找谜团之路,因而也遇上
艾儿一行人,发展出吵吵闹闹的情愫… <br />
<br />
<strong>【特性】</strong> 身为骑士的吉克拥有较高的体力和防御力,是队伍中的坦
克和压制战况的重要角色。他能使用各种强力的连续技来牵制敌人,
技能特性包括:将敌人击飞、晕击、反击、攻击倒地的敌人等等。
除了一般挡住敌人的攻势之外,使敌人失去攻击的能力也是他的强项。
</div>
<div class="info" style="display:none;">
姓名: 丹恩<br />
年纪: 18岁 <br />
身高: 180 CM<br />
职业: 魔法师 <br />
<strong>【故事】</strong> 虽然年轻,却已是国家魔法师团精英,常被指派去执行棘手的任务。有着一头金红发色的丹恩,散发独特的贵气,加上太过俊俏的脸庞,常让他受到太多打扰,因此总是披着披风,低调的执行任务。被公主艾儿跟上,这回他恐怕很难太潇洒…<br />
<br />
<strong>【特性】</strong> 身为魔法师的丹恩,擅长使用冰、火、地三种元素魔法,加上可以使用快捷键实时回魔,施展不同效果的魔法,制造出强大的伤害。技能效果包含了:远距离、范围、定身、持续伤害等等,可从容因应各种战况,是不可或缺的主攻击角色。
</div>
<div class="info" style="display:none;">
姓名: 艾儿 <br />
年纪: 16岁 <br />
身高: 165 CM<br />
职业: 治愈师 <br />
<strong>【故事】</strong> 身为路尼亚王国的小公主,心地善良而单纯,虽然有时也会带点傲慢,想要表现自己的能力,却常常被拿跟姊姊莉儿公主比较,带着委屈和冒险的心情出走。离开了皇宫的艾儿,展现了她过人的治愈魔力,守护着众人的生命…<br />
<br />
<strong>【特性】</strong> 唯一拥有治愈能力的角色,拥有各种治愈技巧:单体、范围、复活、解状态等技能,搭配好用的技能「月之奉献」,可以将血量转换为魔力,让艾儿成为出名的打不死。魔法攻击虽然不强,却常带有击退的特性,非常适合辅助队友。在后期更是闯关不可或缺的重要职业
</div>
</div>
<div class="clear"></div>
</div>
js:
通过切换 骑士,魔法师 ,治愈师 来控制<div id="NS" class="dzylist qs mfs zys">的样式。显示左边的图片。结果只有默认的 骑士才能显示。
<script language="javascript">
var Browser = {
isIE:(navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),
isFirefox:navigator.userAgent.indexOf('Firefox') >= 0,
isOpera:navigator.userAgent.indexOf('Opera') >= 0
}
var jy={
S_obj:null,
D_obj:null,
Num:0,
ay:Array("qs","mfs","zys"),
init:function()
{
this.S_obj=$("JY");
this.D_obj=$("NS");
this.AddEventList();
this.DisplayControl(this.S_obj,this.D_obj,0);
},
DisplayControl:function(_Sobj,_Dobj,num)
{
var oldnum=jy.Num;
var j=jy.Num+1;
var k=num+1;
_Dobj.childNodes[oldnum].style.display="none";
_Sobj.childNodes[oldnum].className="z"+j;
_Dobj.className="dzylist "+ jy.ay[num];
_Dobj.childNodes[num].style.display="block";
_Sobj.childNodes[num].className="z"+k+" curr"+k;
jy.Num=num;
},
AddEventList:function()
{
for(i=0;i<this.S_obj.childNodes.length;i++)
{
var _objEvent=this.S_obj.childNodes;
if(Browser.isIE)
{
_objEvent.attachEvent("onclick",new Function("jy.DisplayControl(jy.S_obj,jy.D_obj,"+i+")"));
}
else
{
//_objEvent.attachEventListener("click",function(){var n=i;jy.DisplayControl(jy.S_obj,jy.D_obj,n)});
_objEvent.attachEventListener("click",new Function("jy.DisplayControl(jy.S_obj,jy.D_obj,"+i+")"));
}
}
}
}
jy.init();
</script>
问过一些资深的js专员都没有很好的解决方案。当时也就是想试试延迟执行代码来测试一下,看能不能达到想要的效果。
最后结果与预期的想法刚好。解决了我在写js代码控制样式这个一直存在的问题。
看个js代码:
DisplayControl:function(_Sobj,_Dobj,num)
{
//alert(num); //设置标签样式加载图片,会导致没有图片显示。 解决方案延迟执行js代码
setTimeout(function(){
var oldnum=jy.Num;
var j=jy.Num+1;
var k=num+1;
_Dobj.childNodes[oldnum].style.display="none";
_Sobj.childNodes[oldnum].className="z"+j;
_Dobj.className="dzylist "+ jy.ay[num];
_Dobj.childNodes[num].style.display="block";
_Sobj.childNodes[num].className="z"+k+" curr
},13);
}
相关文章推荐
- 关于IE6,7设置BODY背景图片无效问题
- div+css使用backgroundRepeat样式设置背景图片的显示方式
- table 边框显示设置和js显示无图片样式
- Java中JLabel设置背景颜色,设置图片标签,重叠显示
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案一
- 从设置a标签背景图片无法显示探究background-image:url()
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案二
- IE8的背景不显示和图片错位 解决方案
- 设置背景图,并在上面添加可随意拖动的图片标签
- Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案
- 关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
- PHPExcel-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- vue2.0用js和jquery设置包含v-if的组件样式无效的的情况
- 关于JPanel设置背景图片的Bug说明
- [Android开发] 代码code设置9.png/9-patch 图片背景后,此view中的TextView等控件显示不正常(常见于listview中)
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- 在Flex4 Spark Application中设置图片背景解决方案汇总
- 关于设置UIView的背景为图片的方法以及问题
- 关于主页面背景图片的设置问题
- 4.3、JS——标签样式的设置 []的使用 事件this初步认识