在BootStrap菜單欄中設置選定項目的背景類似於Bootstrap中的父Nav選項

以下是引導菜單選項，當我選擇導航菜單選項時，我想讓navbar菜單選項具有活動類的功能。在BootStrap菜單欄中設置選定項目的背景類似於Bootstrap中的父Nav選項

<div class="navtop"> 
    <nav class="navbar navbar-default"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#">SPL</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
      <ul class="nav navbar-nav"> 
      <li><a href="mainpage.php">Home </a></li> 
      <li><a href="createteam.php">Create Team </a></li> 
      <li><a href="pastscores.php">Past Scores</a></li> 
      </ul> 

    </nav> 
</div>

目前，當我將鼠標懸停在導航列表它改變顏色按我bootstrap.theme.css所做的更改，但是當它是活躍menu.Please幫我這個沒有殘留。

這是我作出bootstrap.theme.css

.navbar-nav > li > a { 
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25); 
} 
.navbar-nav> li > a:hover, 
.navbar-nav> li > a:focus { 
background-color: #e8e8e8; 
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #e8e8e8 100%); 
background-image:  -o-linear-gradient(top, #3c3c3c 0%, #e8e8e8 100%); 
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#e8e8e8)); 
background-image:   linear-gradient(to bottom, #3c3c3c 0%, #e8e8e8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); 
background-repeat: repeat-x; 
}

來源

2016-05-14 Aravind S

你正在關閉

對我來說確定。在這裏檢查https://jsfiddle.net/pov2jp22/然後是什麼問題？ –

獅子座，我用一個div取代了導航，認爲它是不工作的原因。是的，它在jsfiddle中運行良好，但是在我結束時，懸停工作正常，但如果我將光標移開，背景不會停留。 –

這不是你的CSS類的問題的變化，但每當你點擊任何菜單，分配新類（假設active）通過jquery或javascript分別爲<a>標籤併爲同一類寫一個風格（即active）

來源

2016-05-14 08:08:17

嗨Trimanta，我正在嘗試你的方法添加一個類上點擊，但它不爲我工作不知道爲什麼.https：//jsfiddle.net/pov2jp22/12/同樣的事情是由另一個人完成http：// jsfiddle.net/XBfMV/工作正常。 :( –

你好，https://jsfiddle.net/pov2jp22/12/不工作，因爲沒有添加jquery庫.jquery庫需要被添加來成功運行你的js代碼。 –

在BootStrap菜單欄中設置選定項目的背景類似於Bootstrap中的父Nav選項

回答

相關問題