2

Jquery で初めて機能するスライド バーを自己練習し、非常に奇妙なバグがあり、その理由を見つけることができないようです。

本文は、ナビゲーション div とフラグメント div の 2 つの部分で構成されます。

<div id="featured">
  <div id="fragment1" class="fragment">This is fragment 1 to show </div>
  <div id="fragment2" class="fragment fragment-hide">This is fragment 2 to show </div>
  <div id="fragment3" class="fragment fragment-hide">This is fragment 3 to show </div>

  <div id="nav-fragment1" class="nav nav-chosen"> This is navigation element 1 </div>
  <div id="nav-fragment2" class="nav"> This is navigation element 2 </div>
  <div id="nav-fragment3" class="nav"> This is navigation element 3 </div>
</div>

設計クラスは 2 セットあります。選択されたフラグメントのフラグメントと、選択されていないフラグメントを非表示にするフラグメント非表示。2 セットのナビゲーション デザイン クラスがあります。ナビとナビが選んだもの。

これはCSSです：

#featured{
position:absolute;
top:10px;
left:10px;
width: 800px;
 }

#featured .fragment-hide{   
    display:none;   
}  

#featured .nav-chosen{   
    background-color: #00ff00;  
width:300px;
}  

#featured.nav{
background-color: #ffff00;  
width:300px;
}


#featured .fragment{  
   position:absolute;
   top:0px;
   left:300px; 
   background-color: #ffff00;  
   width:500px;
   height:240px;
}

http://jsfiddle.net/isherwood/URFUS/

デザインは、何を変更しても (背景色、高さ、幅など)、「featured.nav」以外のすべての要素で機能します。

スペルミスか、divが閉じていないか、非常に単純なもののようですが、何度読んでも見つけられません。あなたは？

4

3 に答える 3

3

の間には大きな違いがあります

#featured.nav{
    background-color: #ffff00;  
    width:300px;
}

と

#featured .nav{
    background-color: #ffff00;  
    width:300px;
}

最初のケースでは、 id と class の両方を持つ要素をスタイリングしています。2 番目の - の.nav内部#featured。

于 2013-09-11T15:45:55.783 に答える