更改活動導航欄

我用一個簡單的引導頂部固定的導航欄，我想更改活動頁面的顏色的顏色......但我覺得缺少的東西在我的代碼更改活動導航欄

<div class="navbar"> 
    <div class="navbar-fixed-top"> 
     <div class="container" style="width: auto;"> 
      <div class="nav-collapse" id="nav-collapse"> 
      <ul class="nav" id="nav"> 
      <li class="active"><a href="#skdill" >skisll</a></li> 
      <li class="active"><a href="#skill">skill</a></li> 
      <li class="active"><a href="#research">research</a></li> 
      <li class="active"><a href="#">Link</a></li> 
        </ul> 
     </div> 
     </div> 
    </div> 
    </div>

和CSS是

.navbar { 
    position: fixed; 
    width: 100%; 
} 
.navbar .nav { 
    float: none; 
} 
.navbar .nav>li { 
    width: 25%; 
} 
.content { 
    padding-top: 80px; 
} 

#nav-collapse li a:hover { 
    color: blue; 
} 
#nav-collapse a:hover { 

    background-color: gray; 
} 

#nav-collapse li.active { 
    color:green; 
    background-color: yellow; 
} 
#nav-collapse li.active a { 
    color: red; 
}

...我想例如（活動導航項目的）文本爲紅色，背景色爲灰色（其他）...你有一個想法？

非常感謝！

來源

2013-04-07 ℕʘʘḆḽḘ

首先，有沒有'.site_nav'元素。也許你的意思是'.nav'？ – 2013-04-07 18:37:13

的確非常感謝。我的意思是＃nav-collapse代替 – 2013-04-07 18:42:38

它應該工作...檢查可能會覆蓋您的代碼的其他CSS衝突。 – 2013-04-07 18:44:07

如果你想保留活動項目的狀態，那麼你需要在每個HTML文件中的導航欄佈局。例如，如果你在Research單擊然後在research.html您的導航欄必須

<div class="navbar"> 
<div class="navbar-fixed-top"> 
    <div class="container" style="width: auto;"> 
     <div class="nav-collapse" id="nav-collapse"> 
     <ul class="nav" id="nav"> 
     <li ><a href="#skdill" >skisll</a></li> 
     <li ><a href="#skill">skill</a></li> 
     <li class="active"><a href="#research">research</a></li> 
     <li ><a href="#">Link</a></li> 
       </ul> 
    </div> 
    </div> 
</div>

等了所有的鏈接。

編輯您可以使用JavaScript和做的伎倆：

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> 
    </style> 
    </head> 

    <script> 
    $(function() { 
     $('#nav li a').click(function() { 
      $('#nav li').removeClass(); 
      $($(this).attr('href')).addClass('active'); 
     }); 
    }); 
    </script> 

    <body> 
    <div class="navbar"> 
     <div class="navbar-fixed-top"> 
      <div class="container" style="width: auto;"> 
       <div class="nav-collapse" id="nav-collapse"> 
       <ul class="nav" id="nav"> 
        <li id="home"><a href="#home">Home</a></li> 
        <li id="skill"><a href="#skill">Skill</a></li> 
        <li id="research"><a href="#research">Research</a></li> 
        <li id="link"><a href="#link">Link</a></li> 
       </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    </body> 
</html>

演示： http://jsfiddle.net/Ag47D/3/

來源

2013-04-07 19:09:29

非常感謝你enrmarc，但正如我上面所說，我只有一個單一的HTML文件。並且導航欄允許用戶來回瀏覽不同部分（研究等）。我只是想在項目研究，以保持灰色當用戶點擊它，然後如果用戶點擊其他項目（技能）技能，然後變成灰色等。 – 2013-04-07 19:17:33

.navbar #nav > .active > a { 
    color: red; 
}

這裏是DEMO

來源

2013-04-07 18:47:03

非常感謝你的Miljan，但它不工作如上描述下.. – 2013-04-07 18:55:30

天上也許我應該指出，所有的導航鏈接都放在同一個頁面！這可能是爲什麼它不能正常工作？把頁面想象成一個包含所有內容的簡歷/ cv頁面 – 2013-04-07 19:06:16

@noobie_on_android是的，你應該提到這一點。 – 2013-04-07 20:28:20

這JS爲我工作，我把它放在導航是一個PHP包括每一頁上：

<script> 
$(function() { 

     var path = window.location.pathname; 
     path = path.replace(/\/$/, ""); 
     path = decodeURIComponent(path); 

     $(".nav li a").each(function() { 
      var href = $(this).attr('href'); 
      if(path.substring((path.lastIndexOf('/')+1),path.lenght) === href) {  
       $(this).closest('li').addClass('active'); 
      } else { 
       $(this).closest('li').removeClass(); 
      } 
     });   
});

來源

2015-11-21 10:26:03 Derya

我用的console.log（）來找出哪些子到使用。我嘗試使用onclick函數，因爲我不想在第一次加載時激活它，但它的onclick函數對我不起作用！

Home

\t \t \t \t

Hotel

– Derya 2015-11-21 10:28:28

我有一個答案這是一個有點不同：

假設在導航欄的鏈接是鏈接此（本地服務器上，https://myweburl.com將像https://localhost:8000或https://127.0.0.1:8000代替）：

首頁=>https://myweburl.com

博客=>https://myweburl.com/blog/1，https://myweburl.com/blog/2等

技能=>https://myweburl.com/skills/

聯繫=>https://myweburl.com/contact/

$(document).ready(function() { 
    var loc = window.location.href; // grabbing the url 
    var str = loc.split("/")[3]; // splitting the url and taking the third string 
    if(str.localeCompare("") == 0) 
     $("#home").addClass("active"); 
    else 
     $("#" + str).addClass("active"); 
});

而且，在你的HTML，除去「主動」類，並把相應的「身份證的所有環節。通過各自的'id's，我的意思是id應該根據url來命名。

上面的JS代碼是幹什麼的=>抓取url並將其拆分爲stings數組並獲取變量str中的第4個字符串（第4個字符串將有第3個索引）。然後，這只是把'積極'類放在這個環節。

效益這個方法：除了事實，這是很簡單的，如果用戶直接進入鏈接，而不是通過點擊導航欄的鏈接，然後這種方法也適用。

問題用這種方法：在導航欄非常鏈接的URL必須是已知的。但是，如果url的格式不同，那麼代碼中的一些更改可以幫助您。

來源

2017-06-20 15:07:43

更改活動導航欄

回答

相關問題