JS で制御されたナビゲーション メニューの例 code_javascript スキル

このメニュー効果はスクリプトとスタイルによって制御され、初心者にとって非常に優れた学習コンテンツです:

昨夜のストリクトリー・カム・ダンシングを見ながら、このメニューを整理するこの小さなコードを見てみましょう。一度知ってしまえば、過去を振り返ることができ、知らなければ新しいことを学ぶことができます。実際、私はこのフロントエンドのアイデアを改善したいだけです。

これは、asp.net マスター ページのメニュー部分です

HTML 部分:

コードをコピー コードは次のとおりです:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<本体>

" id="masterid" />

ホームページ

病院の概要

病院の文化

病院ニュース

病院サービス

医療ガイドライン

部門紹介

これは、選択した項目を他の項目と区別するためのものです:

#master .head .nav a.check{background:url(../images/navbg.png) 1px 1px no-repeat;}

以下は HTML に命を吹き込む js 部分で、Web ページを動かします:

コードをコピーしますコードは次のとおりです:

$(document).ready(function () {//Web ページが読み込まれた後に実行することを示します

var current = $("#masterid").val();//jquery を通じて id=masterid を持つページ要素の値を取得します。実際には、選択されたメニューを取得します

var alist = new Array();//配列を定義

if (current == "") {//選択したメニューが取得されない場合、これを無視します

現在 = -1;

}

$("#nav>a").each(function (i, items) {//この部分は、メニュー項目をクリックした後にページを更新したときのスタイルの変更についてです。笑、それぞれが A トラバーサルです#nav>

のコレクションを走査する関数。

alist[i] = $(items);//i は 0 から走査コレクションの終わりまで、1 ずつ増加します

$(alist[i]).click(function () {//alist[i] のクリック イベントを登録すると、クリックされたときに対応するメソッドが実行されます。

If (i != current) {//別のメニュー項目が選択されている場合、選択されたメニューは適切なスタイルで追加され、前のスタイルは削除されます

$(this).addClass("check");

$(alist[current]).removeClass("check");

現在 = i;//戻り値新しく選択されたメニュー項目 ID

}

});

});

$("#nav>a").each(function (i, items) {//これは、ページが新しいページにジャンプした後の、メニュー スタイルを正しく呼び出せるようにするためのページ スタイルの処理です.

alist[i] = $(item);

if (i != 現在) {

$(alist[i]).removeClass("check");

}

});

$(alist[current]).addClass("check");

});

わかりました。すぐに試してみてください。