Question

我有两个div分别包含Facebook Like Box和Twitter Profile Widget。我已经制作了两个按钮或“标签”，当点击它们时，它会将自身及其各自的div移动到右侧并进入屏幕（包含小部件和类似框的div使用定位隐藏在浏览器窗口之外）。 / p>

当我点击第一个按钮时，它可以正常工作。但是当我点击第二个按钮时，只有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>

如果代码看起来很乱，我很抱歉 - 看起来更清晰，div之间有一些线条！如果您愿意，可以在http://www.torucon.no/no/

中查看代码

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

非常感谢您的帮助！

Answer 1

两个CSS文件对#twittertoggle具有不同的z-index值：

torucon.css有z-index：1 torucon_ie.css有z-index：2

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

javascript样式更改onclick无法在IE中工作

1 个答案: