0

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

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

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

这是-部分中包含的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 查看页面以查看我的问题！）

非常感谢您的帮助！

4

1 回答 1

1

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

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

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

于 2012-04-11T07:56:03.147 回答