使用javascript更改所選定位標記文本的顏色

我正在嘗試創建如下所示的導航菜單。我如何讓我的JavaScript改變選定的錨標籤菜單的顏色。使用javascript更改所選定位標記文本的顏色

HTML

<script type="text/javascript"> 
$(function() { 
     $("#menu ul li a").click(function() { 
     // remove classes from all 
     $("#menu ul li a").removeClass("active"); 
     // add class to the one we clicked 
     $(this).addClass("active"); 
     }); 
    }); 
</script> 

<div id="menu"> 
    <ul> 
     <li><a href="index.html" class="active">home</a></li> 
     <li><a href="about.html">about</a></li> 
     <li><a href="portfolio.html">portfolio</a></li> 
     <li><a href="contact.html">contact</a></li> 
    </ul> 
</div>

CSS

#menu ul li a{background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#fff));; 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;} 

#menu ul li a:hover { 
    background: -webkit-linear-gradient(top, #009ec5 0%, #005890 50%, #41d2fc 100%); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
    } 

#menu ul li a.active { 
    background: -webkit-linear-gradient(top, #009ec5 0%, #005890 50%, #41d2fc 100%); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
}

來源

2014-03-29 Homer Kamal

這聽起來像你只是想這個CSS：'.active {color：red; }' –

它將取決於您使用的內容管理系統（如果有的話）或比較網址與當前項目... – vimes1984

您的問題是，您希望在瀏覽器加載其他頁面時執行一些JavaScript。所以你可以改變類，但頁面被重新加載，所以點擊的項目上不再有活動的類。 – ArjanSchouten

通過它你不會阻止去到一個新的頁面被點擊的錨時的樣子。所以我假設你只是想把這個類應用到你當前所在頁面的鏈接上。

對此，您不需要click()事件處理程序。您需要使用window.location.href來確定您的網頁。從默認鏈接中刪除該類，然後將其添加到與該窗口的href匹配的href屬性。像下面這樣做：

$(function() { 
    var page = window.location.href.split('/'); 
    page = page[page.length-1]; 
    $("#menu ul li a").removeClass("active").filter('[href="'+page+'"]').addClass('active'); 
});

來源

2014-03-29 13:08:21 George

$('#menu ul li a').click(function(){ 

    $('#menu ul li a').removeClass('active'); 
    $(this).addClass('active'); 
});

來源

2014-03-29 12:57:02 Anni

使用javascript更改所選定位標記文本的顏色

回答

相關問題