如何更改导航栏中的活动链接颜色

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