[英]change color of selected anchor tag text with 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;
}
$('#menu ul li a').click(function(){
$('#menu ul li a').removeClass('active');
$(this).addClass('active');
});
從外觀上看,當您單擊錨點時,您不會阻止進入新頁面。 因此,我假設您只是想將該類應用於與您當前所在頁面相對應的鏈接。
您不需要為此的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');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.