如何更改導航欄中的活動鏈接顏色

Question

就像這樣http://www.w3schools.com/html/default.asp「HTML HOME」按鈕顏色爲綠色，因爲這是活動鏈接。

那麼如何在我的網站上做同樣的事情呢？

我的HTML代碼：

<!-- Website fixed header--> 
<div class="dropdown website" style="left:0px;"> 
<button class="dropbtn website"><a href="file:///C:/Users/Kamal/Desktop/New%20folder%20(2)/Homepage.html" style="text-decoration:none"><div class="hoverwebsite">Website Name</div></a></button>  
<div class="dropdown-content website" style="left:0;"> 
</div> 
</div> 

我的CSS：

/* Top header orange color */ 
div#fixedheader { 
position:fixed; 
top:0px; 
left:0px; 
width:100%; 
background: url(images/header.png) repeat-x; 
padding:20px; 


} 


/* Dropdown hover button */ 
.dropbtn.website { 
top:0px; 
position: fixed; 
background-color: #000000; 
color: white; 
padding: 10px; 
font-size: 16px; 
border: none; 
cursor: pointer; 
left: 0px; 


} 

.dropdown.website { 
top: 43px; 
position: fixed; 
display: inline-block; 

} 

.dropdown-content.website { 
    display: none; 
position: fixed; 
left: 0; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content.website a { 
color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
} 

.dropdown-content.website a:hover { 
background-color: #f1f1f1; 
color: #f1f1f1;} 

.dropdown.website:hover .dropdown-content { 
display: block; 

} 

.dropdown.website:hover .dropbtn.website { 
background-color: #4CAF50; 

} 

.hoverwebsite { 
color: #f2f2f2; 
font-weight:bold; 

} 
a:active { 
background-color: yellow; 
} 


</style> 

這是我 JSFiddle。讓我知道你是否需要更多細節。

Answer 1

中要保持積極的錨標記添加class="active"

div#fixedheader { 
 
position:fixed; 
 
top:0px; 
 
left:0px; 
 
width:100%; 
 
background: url(images/header.png) repeat-x; 
 
padding:20px; 
 

 

 
} 
 

 

 
/* Dropdown hover button */ 
 
.dropbtn.website { 
 
top:0px; 
 
position: fixed; 
 
background-color: #000000; 
 
color: white; 
 
font-size: 16px; 
 
border: none; 
 
cursor: pointer; 
 
left: 0px; 
 
padding:0px; 
 

 
} 
 

 
.dropdown.website { 
 
top: 43px; 
 
position: fixed; 
 
display: inline-block; 
 

 
} 
 

 
.dropdown-content.website { 
 
    display: none; 
 
position: fixed; 
 
left: 0; 
 
background-color: #f9f9f9; 
 
min-width: 160px; 
 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content.website a { 
 
color: black; 
 
padding: 12px 16px; 
 
text-decoration: none; 
 
display: block; 
 
} 
 

 
.dropdown-content.website a:hover { 
 
background-color: #f1f1f1; 
 
color: #f1f1f1;} 
 

 
.dropdown.website:hover .dropdown-content { 
 
display: block; 
 

 
} 
 

 
.dropdown.website:hover .dropbtn.website { 
 
background-color: #4CAF50; 
 
height:38px; 
 
} 
 

 
.hoverwebsite { 
 
color: #f2f2f2; 
 
font-weight:bold; 
 

 
} 
 

 
a{ 
 
    height:38px; 
 
display:block; 
 
padding-top:16px;} 
 

 
a.active { 
 
background-color: #4CAF50; 
 
color: #f2f2f2; 
 
}

<div class="dropdown website" style="left:0px;"> 
 
<button class="dropbtn website"><a href="file:///C:/Users/Kamal/Desktop/New%20folder%20(2)/Homepage.html" style="text-decoration:none" id="website" >Website Name</a> <a href="file:///C:/Users/Kamal/Desktop/New%20folder%20(2)/Homepage.html" style="text-decoration:none" id="website2">Website Name</a></button>  
 
<div class="dropdown-content website" style="left:0;"> 
 
</div> 
 
</div> 
 
</div>

編輯1： 有這個js代碼在你想錨標記保持活動頁面。我已經從html代碼中的錨標記中移除活動類。也有腳本引用jquery庫。

JS：

$(document).ready(function() { 
$('#website').addClass('active'); 
}); 

編輯2： 您可能無法應對按鈕利潤率，使按鈕的位置，而不是絕對的固定和使用上，左，右，底部對齊它們CSS屬性

.dropbtn.website { 
    top:0px; 
    background-color: #000000; 
    color: white; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
    left: 0px; 
    padding:0px; 
    position:absolute; 
    left:10px; 
    width:150px; 
    } 

    .dropdown.website { 
     Top:43px; 
     position: fixed; 
     display: inline-block; 
     margin-right:10px; 
    } 

Codepen 使用此css來看看它是如何排列的。

編輯3：

使用該索引中的文件

<script> 
$(document).ready(function() { 
$('#website').addClass('active'); 
if($('#website2').hasClass('active')) 
    $('#website2').removeClass('active'); 
}); 
</script> 

這個腳本在yooo.html文件

<script> 
$(document).ready(function() { 
if($('#website').hasClass('active')) 
    $('#website').removeClass('active'); 
$('#website2').addClass('active'); 
}); 
</script> 

同時檢查更新的HTML我已經改變第二個錨標記的ID爲網站2