如何使用Bootstrap Scrollspy獲取背景顏色以更新葯丸？

-1

我想在可摺疊面板中使用Bootstrap Scrollspy。一切似乎都在起作用，除非藥片在點擊它們時不更新/更改顏色。我想我必須改變CSS，但我不確定我需要改變。如何使用Bootstrap Scrollspy獲取背景顏色以更新葯丸？

HTML

<body> 
<div class="container"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
     Title 1 
    </a> 
    </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse in"> 
       <div class="panel-body"> 
        <div class="row"> 
         <nav class="col-sm-3" id="myScrollspy"> 
          <ul class="nav nav-pills nav-stacked"> 
           <li class="active"><a href="#Subtitle1">Subtitle1</a></li> 
           <li><a href="#Subtitle2">Subtitle2</a></li> 
           <li><a href="#Subtitle3">Subtitle3</a></li> 
           <li><a href="#Subtitle4">Subtitle4</a></li> 
           <li><a href="#Subtitle5">Subtitle5</a></li> 
           <li><a href="#Subtitle6">Subtitle6</a></li> 
           <li><a href="#Subtitle7">Subtitle7</a></li> 
          </ul> 
         </nav> 
         <div class="col-sm-9"> 
          <div id="Subtitle1"> 
           <h1>Subtitle1</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle2"> 
           <h1>Subtitle2</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle3"> 
           <h1>Subtitle3</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle4"> 
           <h1>Subtitle4</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle5"> 
           <h1>Subtitle5</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle6"> 
           <h1>Subtitle6</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle7"> 
           <h1>Subtitle7</h1> 
           <p>some text</p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
     Title 2 
    </a> 
    </h4> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
    <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree"> 
     Title 3 
    </a> 
    </h4> 
      </div> 
      <div id="collapseThree" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- /container --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

CSS

body { 
    position: relative; 
    } 

ul.nav-pills { 
     top: 50px; 
     position: fixed; 
    } 

    div.col-sm-9 div { 
     height: 250px; 
     font-size: 28px; 
    }

來源

2015-11-02 MrAutoIt

你忘了添加在第一機體標籤一些自定義的引導屬性。這將使藥丸按鈕突出顯示，雖然你很快就會看到你會遇到另一個小問題。突出顯示的狀態將跳過最後兩個按鈕，從4到7，因爲滾動條會過快地到達瀏覽器的底部。我猜想這會有點棘手。它也將取決於每個部分的文本的長度

HTML：

<body data-spy="scroll" data-target="#myScrollspy">

來源

2015-11-02 21:46:56 IndieRok

感謝。我明白你的意思了。它現在跳到最後一個按鈕上。有沒有這方面的工作？ – MrAutoIt

我使用的自定義屬性，引導但如建議。

HTML

<body data-spy="scroll" data-target="#myScrollspy">

我再改爲每節的高度在CSS來解決跳躍問題。

CSS

#Subtitle1, 
    #Subtitle2, 
    #Subtitle3, 
    #Subtitle4, 
    #Subtitle5, 
    #Subtitle6, 
    #Subtitle7 { 
     height: 500px; 
    }

來源

2015-11-02 23:50:22 MrAutoIt

好不錯！這也是我發現的，以防止跳躍 – IndieRok

如何使用Bootstrap Scrollspy獲取背景顏色以更新葯丸？

回答

相關問題