タスク番号2：垂直メニュー
メニューは、GUIアプリケーションとWebアプリケーションの両方のユーザーインターフェイスの基本要素です。 いくつかの小さな例を使用して、jQueryを使用してナビゲーション要素を作成する方法を説明します。 さらに、要素のプロパティを操作するための関数$（...）の約束された可能性を研究します。
垂直メニューは通常のリンクリストです。
<ul> <li> <a href="/menu.html">ホーム</a> </ li> <li> <a href="/articles.html">記事</a> </ li> <li> <a href="/forum.html">フォーラム</a> </ li> <li> <a href="/links.html">リンク</a> </ li> <li> <a href="/about.html">会社概要</a> </ li> </ ul>
スタイルシートを使用して非常にうまく設計できます。現在のメニューセクションを太字で強調表示（または何らかの方法で強調表示）して、ユーザーが現在どこにいるかをユーザーに知らせるようにします。 サーバー側またはクライアント側のいずれかで、さまざまな方法で行動できます。 ページを生成するとき、サーバースクリプトは、現在のページに対応するメニュー項目を決定し、リスト項目に目的のクラスを登録します。 このオプションには欠点があります：サーバー側でメニュー生成システムを作成する必要がありますが、既製のスクリプトを使用する場合、メニューを操作するためにモジュールを変更することは困難であり、サーバー側スクリプトを作成する可能性がない場合もあります。 2番目のオプションには、上記の欠点がありません。 そして、このためには、$（ドキュメント）.readyの構築にもう一度1行を書く必要があります。
$（ "a [@ href $ =" + document.location.pathname + "]"）。css（{fontWeight： "bold"}）
または、 PaulColomietsによって提案されたわずかに異なるアプローチを使用できます。
var a = $（ "a [@ href $ =" + document.location.pathname + "]"）; a.parent（）。text（a.text（））。addClass（ 'selected'）;
PaulColomietsは、タグだけでなく、タグへのより完全なパスを指定することをお勧めします。
アヤブリク
仕組み
リンクの形式を変更する場合（相対パスを使用しました）、スクリプトを変更する必要があります。 すべての作業を行う1行については、おなじみの$（...）関数を使用します。この関数は、この場合、document.location.pathnameで終わるhref属性の値を持つすべてのリンクを選択します。 この変数には、現在のページへのパスが格納されます。 また、cssメソッドを使用して、カスケードフォントウェイトスタイルシートパラメーターの値を設定します。 お気づきのように、font-weightパラメーター名はfontWeightで少し異なって記述されています。つまり、JavaScriptで使用される「キャメル」スタイルです。 最後の仕上げとして、現在のセクションのメニュー項目のクリックをキャンセルすることを提案します。 あなたはすでにあなたがいるページに行くことができないので、これは非常に合理的な決定です。 そして、jQueryスクリプトで常に使用される一連の呼び出しを示すことができます。
$（ドキュメント）.ready（関数（）{
$（ "a [@ href $ =" + document.location.pathname + "]"）
.css（{fontWeight： "bold"}）
.click（function（）{return false;}）;
}）;
結論
追加の変数を使用せずに済ませることができました。これにより、単純なケースでは明快さを損なうことなくコードを削減できます。 このソースでは、この場合に適した設計スタイルも確認できます。1行ではなく、呼び出しのチェーンを複数に分割して、呼び出しが行われる場所を示しています。 外部リンクのみに「矢印」を付けるためのスクリプトを変更することは今では難しくないと思います。 "$ ="以外の等価演算子が何であり、正確に何をするかを簡単にすることを強くお勧めします。
<p />
記事のサイクル
- レイアウトデザイナーのjQuery（パート1）：リンクの矢印
タイプセッターのjQuery（パート2）：おいしいメニュー