2

HTMLで簡単なメニューを作りました。それは（ほぼ）完全に機能します。メニュー項目は、ご覧のとおり、CSS で設定された背景画像へのリンクです。マウスオーバーすると、別の背景画像が表示されます。

私の問題は、メニュー項目を常に「選択」するための有効な解決策が見つからないことです。つまり、メニューに実際のページを表示したくないということです。

まず、HTML と CSS を示します。その後、私がやろうとしたことを示します。

<div id="menu">
    <a href="@Url.Action("Index","Produkter")" id="menu_produkter"></a>
    <a href="@Url.Action("Index", "Galleri")" id="menu_galleri"></a>
    <a href="@Url.Action("Index", "Kontakt")" id="menu_kontakt"></a>
</div>

CSS は次のようになります。

#menu_produkter 
{
    display: block;
    position: absolute;
    background: url(images/menu_produkter.png) no-repeat;
    width: 108px;
    height: 26px;
    margin-left: 376px;
    margin-top: 52px;
}

#menu_produkter:hover {
    background: url(images/menu_produkter_hover.png) no-repeat;
    cursor: pointer;
}

#menu_galleri {
    display: block;
    position: absolute;
    background: url(images/menu_galleri.png) no-repeat;
    width: 64px;
    height: 26px;
    margin-left: 496px;
    margin-top: 52px;
}

#menu_galleri:hover {
    background: url(images/menu_galleri_hover.png) no-repeat;
    cursor: pointer;
}

#menu_kontakt {
    display: block;
    position: absolute;
    background: url(images/menu_kontakt.png) no-repeat;
    width: 85px;
    height: 26px;
    margin-left: 572px;
    margin-top: 52px;
}

#menu_kontakt:hover {
    background: url(images/menu_kontakt_hover.png) no-repeat;
    cursor: pointer;
}

「:hover」ID と同じ背景画像を使用して、#menu_xxxx_on という各項目に CSS ID を追加しようとしました。

次に、ビューの上部に ViewBag.CurrentPage = "xxxx" を設定します。最後に、Razor を使用して現在のページを確認します。

$<a href="@Url.Action("Index", "Produkter")" id="menu_produkter@{if(ViewBag.CurrentPage.Equals("Salonen")) {<text>_on</text>}}"></a>*

うまくいくことを願っていましたが、代わりにメニュー項目が完全に消えてしまいました。Google Chromeで「要素を検査」して、何が問題なのかを調べようとしました。すべての CSS プロパティをリセットするようです。

これに対する簡単な解決策はありますか?それとも別の方法で行う必要がありますか? カスタムhtmlヘルパーを使用した他のソリューションを見てきましたが、この方法で実行できるとしたら、少しやり過ぎだと思います。

前もって感謝します。

4

1 に答える 1

0

クラスで解決したい場合は、たとえばjQuery関数を使用します：

$(function(){
var id = $('hiddenId').val();
 $('#'+id).addClass("someClass");
});

someClass で、選択したメニュー タブのスタイルを定義します。

ViewBag を使用して送信し、id を持つ hiddenField でレンダリングできる選択したメニューの ID: hiddenId

@Html.Hidden("hiddenId",(object)ViewBag.CurrentPage)

しかし、innerHtml で操作することをお勧めします。jQuery 関数は次のようになります。

$(function(){
    var id = $('hiddenId').val();
    var header =  $('#'+id).html();
    $('#'+id).html(header+'-on');
    });
于 2012-08-30T12:26:44.873 に答える