一部のCSSが効いていない？

質問

下記のサイトを参考に、タブ切り替えができるページを作っていました。

http://www.softel.co.jp/blogs/tech/archives/1564

しかし、このサンプルコードのままでは、最初の画面で全てのタブの情報が表示されてしまいます。

どうやら、CSS部分

/* 最初はパネルは非表示 */
#tabs .panel {display:none; clear:both; width:780px; border:1px solid #ccc; padding:10px;}

が効いていないように思うのですが・・・

どのように直せばよいのか、自ら解決に至らなかったため、ご質問させていただきました。

ご存じの方いらっしゃいましたら、何卒ご教授のほど宜しくお願い致します。

回答No.1

sora1tora2 · ベストアンサー

こんにちは

おそらくですが、

参考URLページのHtmlタグが<div id="panel1">になっていました。

しかし、実際は

<div id="panel1" class="panel">～</div>
<div id="panel2" class="panel">～</div>
<div id="panel3" class="panel">～</div>
<div id="panel4" class="panel">～</div>

にしなければ

/* 最初はパネルは非表示 */
#tabs .panel {display:none; clear:both; width:780px; border:1px solid #ccc; padding:10px;}

のCSS部分は反映されません。

参考になればよいのですが。

お礼

出来ました!!
class設定だったんですね!!
本当に、ありがとうございます!!