如何更改當前頁面鏈接的顏色 - HTML / CSS / JavaScript
[英]How To Change Color of Current Page Link - HTML / CSS / JavaScript
問題描述
我正在嘗試遵循這個例子。
我已經加載了這個腳本：
<script>
// current page highlight
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
</script>
進入這些文件的<head>部分： index.html （主頁）、 about.html和store.html
對於這個網站。 服務永遠不需要突出顯示，博客和我的帳戶目前是死鏈接。
然后我將相應的類添加到我的 CSS 中：
.active {
color:#337ab7;
}
所以當我們在 Home (index.html) 時，Home 鏈接應該是#337ab7 ，當我們在 About (about.html) 時，About 鏈接應該是#337ab7 ，當我們在 Store (store .html)，商店鏈接應該是#337ab7 。
但是現在，還是沒有結果。 我需要對 JavaScript、CSS 或 HTML 進行哪些更改才能應用此功能？
這是相關導航菜單的 HTML：
編輯：在有問題的鏈接中添加了active類：
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a class="navbar-brand" href="http://nowordpress.gatewaywebdesign.com/">
<img src="assets/images/gatewaylogo.png">
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://nowordpress.gatewaywebdesign.com/index.html" class="active">Home <span
class="sr-only">(current)</span></a></li>
<li><a href="http://nowordpress.gatewaywebdesign.com/about.html" class="active">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
Services
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="http://nowordpress.gatewaywebdesign.com/website-design.html">Website Design</a></li>
<li><a href="http://nowordpress.gatewaywebdesign.com/graphic-design.html">Graphic Design</a></li>
<li><a href="http://nowordpress.gatewaywebdesign.com/promotional-products.html">Promotional Products</a></li>
<li><a href="http://nowordpress.gatewaywebdesign.com/search-engine-marketing.html">Search Engine Marketing</a></li>
<li><a href="http://nowordpress.gatewaywebdesign.com/wordpress-conversion.html">WordPress Conversion</a></li>
</ul>
</li>
<li><a href="/store.html" class="active">Store</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">My Account</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
這里又是現場網站的鏈接。 謝謝你。
4 個解決方案
解決方案1
2 2017-05-24 15:28:10
您的.active類樣式被類.navbar-default .navbar-nav > li > a覆蓋。
您需要更具體地更改 CSS 選擇器，從.active為.navbar-default .navbar-nav > li > a .active 。
關於僅將active類添加到當前訪問的 href。 嘗試這個：
$('ul.nav > li > a').each(function(){
var url = window.location.href; //if comparing with full URL
//var url = window.location.href.pathname; //if comparing with page name (ex. /about.html)
var href = $(this).prop('href');
if (url == href) {
$(this).addClass('active');
}
});
或者，正如@Mohamed-Yousef 回答的那樣，您可以只寫：
$("a[href*='"+ window.location.href +"']").addClass('active');
如果您總是將完整 URL 與完整 Href URL 進行比較。
解決方案2
2 已采納 2017-05-25 01:00:34
解決方案
例如商店頁面：
HTML：
<li><a class="active" href="/store.html">Store</a></li>
CSS：（ .navbar-default .navbar-nav > li > a覆蓋了.active類，如doutriforce 所述）
.navbar-default .navbar-nav > li > a.active {
color: #337ab7;
}
.navbar-button:hover, a.active {
color: #337ab7;
transition: ease-in-out 0.3s;
}
JavaScript：
// current page highlight
// link color code starts
$(document).ready(function () {
console.log("current page", window.location.href);
$("[href]").each(function () {
$('a[href]:not([href=#])').each(function () {
if (window.location.href.indexOf($(this).attr('href')) > -1) {
console.log($(this).attr('href') +" is active ");
$(this).addClass('active');
}
else {
console.log($(this).attr('href') + "is not active ");
}
});
});
});
// link color code ends
然后確保根據文件中哪個頁面是活動頁面來更改哪個<a>鏈接獲取active類 - 即，如果您正在編輯 login.html，那么您的 HTML 將如下所示：
<li><a href="/store.html">Store</a></li>
<li><a href="/blog.php">Blog</a></li>
<li><a class="active" href="/login.html">Login</a></li>
如果您正在編輯 blog.php，那么您的 HTML 將如下所示：
<li><a href="/store.html">Store</a></li>
<li><a class="active" href="/blog.php">Blog</a></li>
<li><a href="/login.html">Login</a></li>
等等。
最后，在 index.html（主頁）中，一定要在鏈接文本之后添加一個帶有sr-only類的 span，如下所示：
<li><a href="http://nowordpress.gatewaywebdesign.com/index.html">
Home <span class="sr-only">(current)</span></a></li>
使用 Bootstrap 隱藏（當前）標簽。
解決方案3
1 2017-05-24 14:53:32
無需使用.each()您可以為此使用選擇器
<script>
// current page highlight
$(document).ready(function() {
$("a[href*='"+ window.location.href +"']").addClass('active');
});
</script>
如果您需要知道a[href*='"+ window.location.href +"'] window.location.href器是如何工作的，它只是意味着如果您a href a 更改為<a href="/website-design.html">這個選擇器不起作用..如果是這種情況，您需要使用.each()和.indexOf()
<script>
// current page highlight
$(document).ready(function() {
$('a[href]:not([href=#])').each(function(){
if(window.location.href.indexOf($(this).attr('href')) > -1){
$(this).addClass('active');
}
});
});
</script>
解決方案4
1 2017-05-24 14:54:45
about.html:19 Uncaught SyntaxError: Invalid or unexpected token
第 19 行有一些奇怪的 unicode 引發解析器錯誤。 您可以在“foreach”的 chrome 檢查器中看到它。
清理它可能會解決它。
如何僅使用 JavaScript 而不是 CSS 或 HTML 來更改鏈接顏色
[英]How to change link color by using only JavaScript not CSS or HTML
(html/css/javascript) 嘗試將導航欄中的當前頁面鏈接設為不同顏色
[英](html/css/javascript) Trying to make my Current Page link in the navbar a different color
如何使用JavaScript更改當前頁面的導航按鈕/鏈接的背景顏色？
[英]How can I change the background color of a current page's navigation button/link using JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.