JavaScript样式更改单击在IE中不起作用

Question

我有两个div分别包含Facebook Like Box和Twitter Profile Widget。我制作了两个按钮或"选项卡"，单击它们时，它们会将自身及其各自的div 向右移动并进入屏幕（包含小部件和类似框的div 使用定位隐藏在浏览器窗口之外）。

当我单击第一个按钮时，它工作正常。但是当我单击第二个按钮时，只有div 移动，但按钮会保留。使用 z 索引，我能够将选项卡放在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>

如果代码看起来很乱，我很抱歉 -div 之间有一些行看起来更干净！如果您愿意，可以在 http://www.torucon.no/no/看到代码在操作

（如果愚蠢 - 对于像我这样的人 - 记得查看带有IE的页面以查看我的问题！

非常感谢您的帮助！

Answer 1

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

托鲁孔.css的 Z 指数：1torucon_ie.css 的 z 指数：2

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