0

Facebook Like Box と Twitter Profile Widget を別々に含む 2 つの div があります。2 つのボタンまたは「タブ」を作成しました。クリックすると、それ自体とそれぞれの div の両方が画面の右側に移動します (ウィジェットと同様のボックスを含む div は、配置を使用してブラウザー ウィンドウの外側に隠されます)。

最初のボタンをクリックすると、正常に動作します。しかし、2 番目のボタンをクリックすると、div のみが移動しますが、ボタンは残ります。z-indexing を使用して、div の上にタブを配置することができました。ボタンをもう一度クリックすると、ボタンは外に出ましたが、div は元に戻りました。

2 つの 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でページを表示して、私の問題を確認することを忘れないでください！）

本当にありがとうございました！

4

1 に答える 1

1

2つの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 に答える