javascript样式的变化onclick在IE中不工作

我有两个div分别包含Facebook Like Box和Twitter Profile Widget。我做了两个按钮或“选项卡”，点击后，它们将自身和其各自的div移动到右侧并进入屏幕（包含小部件的div和类似框使用定位隐藏在浏览器窗口之外）。javascript样式的变化onclick在IE中不工作

当我点击第一个按钮时，它工作正常。但是当我点击第二个按钮时，只有div移动，但按钮保持不变。使用z-indexing，我能够将标签放在div的顶部。当我再次点击该按钮时，该按钮移出 - 但该div移回。

两个div的代码完全相同，除了图像名称和id（自然）。

这里是包含在-section的JavaScript：

function facebookToggle1() { 
var fb = $('#facebooktab'); // save reference to element 
if(fb.css('margin-left') === '-250px') { 
    fb.css('margin-left', '0px'); 
    fb.css('margin-top', '-150px'); 
    fb.css('z-index', '2'); 
} else { 
    fb.css('margin-left', '-250px'); 
    fb.css('margin-top', '-300px'); 
    fb.css('z-index', '0'); 
} 
} 

function facebookToggle2() { 
var fb2 = $('#facebooktoggle'); 
if(fb2.css('margin-left') === '0px') { 
    fb2.css('margin-left', '250px'); 
} else { 
    fb2.css('margin-left', '0px'); 
} 
} 

function twitterToggle1() { 
var twi = $('#twittertab'); // save reference to element 
if(twi.css('margin-left') === '-250px') { 
    twi.css('margin-left', '0px'); 
    twi.css('margin-top', '-150px'); 
    twi.css('z-index', '2'); 
} else { 
    twi.css('margin-left', '-250px'); 
    twi.css('margin-top', '-300px'); 
    twi.css('z-index', '0'); 
} 
} 

function twitterToggle2() { 
var twi2 = $('#twittertoggle'); 
if(twi2.css('margin-left') === '0px') { 
    twi2.css('margin-left', '250px'); 
} else { 
    twi2.css('margin-left', '0px'); 
} 
}

下面是HTML代码：

div id="facebooktab"> <!-- Contains facebook feed in static div on the left side of the screen --> 
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Torucon /115138348575729" data-width="250" data-height="300" data-show-faces="false" data-border- color="white" data-stream="true" data-header="false"></div> 
</div> 
<div id="facebooktoggle" onclick="facebookToggle1(); facebookToggle2();"> <!--Visible, click-able switch to show/hide the facebook feed --> 
</div> 
<div id="twittertab"> <!-- Contains twitter feed in static div on the left side of the screen --> 
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({ 
version: 2, 
type: 'profile', 
rpp: 4, 
interval: 30000, 
width: 250, 
height: 300, 
theme: { 
shell: { 
    background: '#51c3e2', 
    color: '#ffffff' 
}, 
tweets: { 
    background: '#ffffff', 
    color: '#000000', 
    links: '#ff0000' 
} 
}, 
features: { 
scrollbar: true, 
loop: false, 
live: true, 
behavior: 'all' 
} 
}).render().setUser('ToruconOfficial').start(); 
</script> 
</div> 
<div id="twittertoggle" onclick="twitterToggle1(); twitterToggle2();"> <!-- Visible click-able switch to show/hide the twitter feed --> 
</div>

我什么代码看起来凌乱对不起 - 它看起来在某些行清洁在divs之间！如果你愿意，代码为http://www.torucon.no/no/

看到在行动（在愚蠢的情况下 - 为人们像我一样 - 记得IE来浏览网页，看看我的问题！）

谢谢你这么多为所有帮助！

来源

2012-04-11 Aurora Schmidt

即使由于我没有提供解决方案来解决您的问题，请参阅我为您编写的以下代码：http://jsfiddle.net/pzn6t/6/ 这是“正确的方式”。 – Dementic 2012-04-11 08:21:43

两个CSS文件具有不同的z索引值#twittertoggle：

torucon.css具有z索引：1个 torucon_ie.css具有z索引：2

更改torucon_ie.css到z-index：1修复了IE中的问题。

来源

2012-04-11 07:56:03

这当然会使标签隐藏在div下 - 但重点是该标签应该与twitter部件一起移动到右侧。 javascript被设计为如果再次单击时会将所有内容都移回原位，所以重要的是该按钮的位置应使其可以访问:) – 2012-04-11 14:08:08

javascript样式的变化onclick在IE中不工作

回答

相关问题