更改导航栏背景颜色?

时间:2013-08-05 00:30:38

标签: html css navigation hyperlink

我目前正在尝试为我的某个网站设计导航栏。此导航栏将位于网页顶部。

问题是当我将鼠标悬停在它们上方时,我可以让项目改变颜色,但是一旦页面处于活动状态,就无法使项目保持悬停状态。所以例如,如果我想去“Home”,我会将鼠标悬停在导航栏中的“Home”项目上,当它点击它返回“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;
}

所以目前导航栏的背景是黑色的,当你将鼠标悬停在某个东西上时,它会变成灰色。当该页面处于活动状态时,我希望它保持灰色。

任何解决方案?

提前谢谢。

2 个答案:

答案 0 :(得分:1)

尝试

:focus 

:active

但我认为需要点击它。

答案 1 :(得分:1)

你熟悉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之一相同,则会获得一个活动类,您可以将其设置为灰色。