このメニュー効果はスクリプトとスタイルによって制御されます。これは初心者にとって非常に優れた学習コンテンツです。
昨夜のストリクトリー・カム・ダンシングを見ながら、このメニューを整理するための小さなコードを見てみましょう。知っていれば過去を振り返ることができ、知らない場合はそこから学ぶことができます。実際、私はこのフロントエンドのアイデアを改善して、再びストレンジャーにならないようにしたいだけです。
これは、asp.net マスター ページのメニュー部分です。
HTML部分:
次のようにコードをコピーします。
<%@ マスター言語="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="サーバー">
<タイトル></タイトル>
<link type="text/css" rel="スタイルシート" href="Styles/master.css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/nav.js" type="text/javascript"></script>
</head>
<本文>
<div id="ナビ">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0">ホーム</a>
<a href="surveylist.aspx?menutemp=1">病院の概要</a>
<a href="Culturelist.aspx?menutemp=2">病院の文化</a>
<a href="腫瘍動的リスト.aspx?menutemp=3">病院ニュース</a>
<a href="サービス リスト .aspx?menutemp=4">病院サービス</a>
<a href="医療ガイドライン.aspx?menutemp=5">医療ガイドライン</a>
<a href="Department の紹介.aspx?menutemp=6">部門の紹介</a>
</div>
</body>
</html>
これは、選択した項目を他の項目と区別するための CSS 部分を見てください。
#master .head .nav a.check{ 背景:url(../images/navbg.png) 1px 1px no-repeat; }
以下は、HTML に命を吹き込み、Web ページを動かす js 部分です。
次のようにコードをコピーします。
$(document).ready(function () {//Web ページが読み込まれた後に実行する必要があることを示します
var current = $("#masterid").val();//jquery を通じて id=masterid を持つページ要素の値を取得します。実際には、選択されたメニューを取得します。
var alist = new Array() //配列を定義します。
if (current == "") {//選択したメニューが取得されない場合は無視します
現在 = -1;
}
$("#nav>a").each(function (i, items) {//この部分は、メニュー項目をクリックした後にページを更新したときのスタイルの変更についてです。笑、それぞれはトラバーサル関数です。 #nav>a のコレクションを走査します。
alist[i] = $(items);//i は 0 から始まり、走査されたコレクションの終わりまで 1 ずつ増加します
$(alist[i]).click(function () {//alist[i] のクリック イベントを登録すると、クリックされたときに対応するメソッドが実行されます。
if (i != current) {//別のメニュー項目が選択されている場合、選択されたメニューは適切なスタイルで追加され、以前のスタイルは削除されます。
$(this).addClass("チェック");
$(alist[current]).removeClass("check");
current = i;//新しく選択されたメニュー項目 ID を返します
}
});
});
$("#nav>a").each(function (i, items) {//これは、メニュー スタイルを正しく呼び出せるように、新しいページにジャンプした後のページ スタイルの処理です。
alist[i] = $(項目);
if (i != 現在) {
$(alist[i]).removeClass("check");
}
});
$(alist[current]).addClass("check");
});
わかりました、すぐに試してみることができます。