使用scrollSpy引導不需要的.active類

我正在使用Bootstrap創建navbar並嘗試使用data-spy="scroll"。但它繼續在最右邊的navbar項目（這是本例中的聯繫人）應用active類，這是不受歡迎的，我需要在向下滾動到特定部分時激活nav項目。當我點擊navbar中的項目時，跳轉到特定部分就沒有問題。 HTML代碼的使用scrollSpy引導不需要的.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代碼：

.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的整個目的是應用活動類。如果所有三個部分都可見，則可以將活動類應用到最後一個，在這種情況下，請聯繫。 – reinder

問題一旦我在我的html文件的開頭添加了<!DOCTYPE html>代碼，就解決了。

來源

2016-11-23 19:29:28

在情況下，你可以使用jQuery這將做的工作：

$(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

使用scrollSpy引導不需要的.active類

回答

相關問題