0

我有下面的菜单栏，我想在选择页面后将 css 类更改为激活 html 代码。因此，当用户选择查看所述页面时，我想设置已设置的活动类

HTML 代码

<div id="main-nav">
    <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
    <div class="clear-both">&nbsp;</div>
</div>

CSS 代码

#main-nav{
    height:29px;
    float:left;
    background-image:url(../Styles/images/nav-bg.gif);
    background-repeat:repeat-x;
    background-position:top left;
    width:100%;
}

#main-nav ul,
#main-nav li{
    padding:0px;
    margin:0px;
    list-style-type:none;
}

#main-nav ul{
    height:29px;
    line-height:29px;
    background-image:url(../Styles/images/nav-bar.gif);
    background-position:right;
    background-repeat:no-repeat;
    float:left;
    padding:0px 1px 0px 0px;
    margin:0px 0px 0px 10px;
}

#main-nav li{
    height:29px;
    line-height:29px;
    display:inline;
    position:relative;
    float:left;
    width:80px;
    text-align:center;
}

#main-nav li a{
    height:29px;
    width:80px;
    text-align:center;
    float:left;
    background-image:url(../Styles/images/nav-bar.gif);
    background-position:left;
    background-repeat:no-repeat;
}



#main-nav li a:link,
#main-nav li a:visited{
    color:#FFFFFF;
    text-decoration:none;
}

#main-nav li.active a,
#main-nav li a:hover{
    background-image:url(../Styles/images/active.gif);
    background-repeat:no-repeat;
    background-position:left;
}
4

1 回答 1

1

制作基于列表的菜单的关键：

  1. 不要对列表进行样式设置（除了显示、位置和浮动以及清除边距和填充之外）
  2. 使用display:block并将所有样式放在A-tag 上（这包括您的悬停和活动状态）。

另外，选择display:inline-block或float:left，不要同时选择。

于 2013-02-25T17:29:59.963 回答