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:blockALL STYLINGを使用してA-tagに配置します（これには、ホバー状態とアクティブ状態が含まれます）。

また、両方ではなくdisplay:inline-block、またはを選択しますfloat:left。

于 2013-02-25T17:29:59.963 に答える