スクロールスパイでブートストラップ不要の.activeクラス

navbarを作成し、ブートストラップを使用してdata-spy="scroll"を使用しようとしています。しかし、これは望ましくない最も右側のnavbarアイテム（この場合は連絡先）にactiveクラスを適用し続け、特定のセクションまでスクロールしてnavアイテムを有効にする必要があります。 navbarの項目をクリックすると、特定のセクションへのジャンプは問題ありません。 HTMLコードのスクロールスパイでブートストラップ不要の.activeクラス

パート：

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="#myPage">My Logo</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#services">Services</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
    <div class="jumbotron text-center full-screen"> 
    <h1>Hello World</h1> 
    </div> 
    <div id="services" class="container-fluid text-center full-screen">Services</div> 
    <div id="about" class="container-fluid text-center full-screen">about</div> 
    <div id="contact" class="container-fluid text-center full-screen">Contact</div> 
</body>

とCSSコード：あなたがこの仕事をするのjQueryを使用することができます場合は

.full-screen { 
    height: 100%; 
} 
.jumbotron { 
    background-color: #32db61; 
    color: #fff; 
    font-family: Tahoma; 
    padding: 254px 25px; 
    margin-bottom: 0px; 
} 
.navbar { 
    background-color: #5f5f5f; 
    margin-bottom: 0; 
    border: 0; 
    border-radius: 0; 
    z-index: 9999; 
    font-size: 18px !important; 
    line-height: 25px !important; 
    letter-spacing: 4px; 
    font-family: Montserrat, sans-serif; 
} 
.navbar li a, .navbar .navbar-brand{ 
    color: #fff !important; 
} 
.navbar-nav li a:hover, .navbar-nav li.active a { 
    background-color: red !important; 
    color: black !important; 
}

出典

2016-11-23 Sina Hwz

純粋なCSSソリューションである必要がありますか、JSを使用できますか？ :) – Troyer

純粋なCSSが動作するはずです:) –

scrollspyの全目的は、アクティブなクラスを適用することです。 3つのセクションがすべて表示されている場合、scrollspyはアクティブなクラスを最後のもの（この場合は連絡先）に適用します。 – reinder

問題一度私の<!DOCTYPE html>コードを私のhtmlファイルの先頭に追加して解決しました。

出典

2016-11-23 19:29:28

：

$(document).ready(function(e){ 
    e.stopImmediatePropagation(); 
    $('.navbar-right li').removeClass('active'); 
    //in case you want to remove all actives after loading 
    //$('.active').removeClass('active'); 
});

出典

2016-11-23 08:36:12 Troyer

スクロールスパイでブートストラップ不要の.activeクラス

答えて

関連する問題