0

ビューの上部にいくつかのナビゲーション バーがあります。MVC 4 Razor View を使用してレイアウトを設計しています。現在、ホバー効果のあるナビゲーションバーを取得できましたが、さらに何かをする必要があります。

現在、これが私のビューにあるものです。 ここに画像の説明を入力

デフォルトでは、ホームバーをオレンジ色で表示したいと考えています。ユーザーが他のバーに移動すると、ホーム バーは通常の状態に戻り、選択したバーのスタイルがアクティブになります。

これがcssでの私のスタイリングです。

ul.topnav
{
    display:table;
    list-style: none;
    padding: 0px 0px 0px 10px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    text-align: left; 
    font-size: 1.2em; 
}
ul.topnav li
{
    width: auto;
    display:table-cell;
    margin: 0px 6px;
    padding: 0 15px 0 0;
}
ul.topnav li a
{
    margin: 0px 6px;
    border-top: 5px solid #CCC;
    padding: 0 15px 0 0;
    color: black;
    display: block;
    text-decoration: none;
}
ul.topnav li a:hover
{
    color: #eb8c00;
    border-top: 5px solid #eb8c00;
    margin: 0px 6px;
    padding: 0 15px 0 0;
    display: block;
}

私の _Layout.cshtml には、私のコードがあります。

  <div id="app-top-navigation">
        <ul class="topnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
   </div>
4

1 に答える 1

0

アクティブにする必要があるナビゲーション項目に.activeを適用するだけです。

HTML

<li><a href="#" class="active">Home</a></li>

CSS

ul.topnav li a.active { 
border-top: 5px solid orange; 
}
于 2013-07-09T03:48:26.357 に答える