[英]Changing Navigation Bar Background Colour?
我目前正在尝试为我的一个网站设计一个导航栏。 该导航栏将位于网页顶部。
问题在于,当我将项目悬停在项目上时,它们可以更改颜色,但是一旦页面处于活动状态,就无法使项目保持在悬停状态。 因此,例如,如果我想转到“主页”,则将鼠标悬停在导航栏中的“主页”项上,并且当我单击它以返回到“ index.php”时,它会变成灰色。导航栏中的“”将保持灰色。 (导航栏的背景为黑色)。
我已经格式化了一个表格,其中只有一行,并且有一些数据,这些数据将用作链接。 这是HTML代码的样子:
<div id="header_banner">
<table id="header_banner_table">
<tr id="header_banner_row">
<td id="header_banner_a"><a class ="link1" href="">Item 1</a></td>
<td id="header_banner_b"><a class ="link1" href="">Item 2</a></td>
<td id="header_banner_c"><a class ="link1" href="">Item 3</a></td>
<td id="header_banner_d"><a class ="link1" href="">Item 4</a></td>
<td id="header_banner_e"><a class ="link1" href="">Item 5</a></td>
<td id="header_banner_f"><a class ="link1" href="">Item 6</a></td>
<td id="header_banner_g"><a class ="link1" href="">Item 7</a></td>
</tr>
</table>
</div>
以下是一些CSS:
#header_banner {
display: block;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 71px;
background-color: black;
color: white;
font-size: 18px;
text-align:center;
text-transform: uppercase;
text-decoration: none;
}
#header_banner_table {
position: fixed;
top: 0px;
width: 60%;
padding: 0px;
margin-left: 20%;
margin-right: 20%;
}
.link1 {
position: relative;
display: block;
color: white;
text-decoration: none;
padding-top: 23px;
padding-bottom: 23px;
padding-left: 20px;
padding-right: 20px;
}
.link1:hover{
position: relative;
display: block;
text-decoration: none;
color: white;
padding-top: 23px;
padding-bottom: 23px;
padding-left: 20px;
padding-right: 20px;
background-color: gray;
}
因此,当前导航栏的背景为黑色,当您将鼠标悬停在某物上时,它会变成灰色。 我希望该页面处于活动状态时保持灰色。
有什么办法吗?
先感谢您。
尝试
:focus
要么
:active
但是我认为它需要被点击。
您熟悉jQuery吗? 如果我在想与您相同的事情,则应该可以使用jQuery。
var path = window.location.pathname;
$('#header_banner_row a').each(function(){
if( $(this).attr('href') === path ){
$(this).addClass('active');
}
});
因此,基本上, var path
就是浏览器导航栏中.com之后的内容。 而且,如果该路径与标题中的a
相同,则它将获得一类活动类别,您可以将其设置为灰色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.