关于js设置标签样式来显示图片背景无效的解决方案

最新推荐文章于 2024-02-04 02:17:06 发布

原创最新推荐文章于 2024-02-04 02:17:06 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #opera #firefox #class #任务

javascript、jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的Tab面板切换功能，通过修改DOM元素的样式来实现内容的切换显示。文章详细展示了HTML结构和JavaScript代码，并提供了解决方案以确保每个Tab都能正确显示。

在页面里使用了切换效果。背景图片的显示是通过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);

}