JavaScript + jQueryで作るナビゲーションバー

選択状態の設定・取得と処理の分岐

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クリックされたトップメニューの選択状態を設定・取得する方法、そして状態に応じた処理の分岐の方法について解説致します。
講師:
07:25

字幕

このレッスンではJavaScript と jQuery を使ってナビゲーションバーを実装するにあたり、クリックされたトップメニューの選択状態を設定、取得する方法、そして、その状態に応じた処理の分岐の方法について解説していきます。まずは、ダウンロードしてきたこちらの selected というフォルダの中に入っている、こちら3つのファイルをエディタで開いてください。そしてこれが、それらのファイルを開いた状態です。これらのファイルを使って、今回のレッスンの解説を進めていきたいと思います。それでは早速、レッスンを始めていきましょう。今回ご説明する「選択状態」という言葉ですが、ここでは、スライドメニューが表示されているか、それとも表示されていないかという状態のことを指します。要するに、トップメニュー部分をクリックしてスライドメニューが表示されていれば、それは選択状態である、もしくは逆で、スライドメニューが表示されていないのは非選択状態になっているということですね。それではこれを踏まえて、選択状態と設定の取得についてJavaScript を書いていってみたいと思います。それでは javascript.js を開きます。 今 javascript.js はこの様な状態ですね。それではまず、クリックされたトップメニュー、要するにスライドメニューが表示されているトップメニューに選択状態を表すしるしをつけてみたいと思います。選択状態を表すしるしですが、ここでは class を使ってみたいと思います。まずこちらのスライドメニューを表示させる処理の部分ですね。こちらの上に、この様に書きましょう。まずは $(this) と書きます。そして .addClass();そして、この addClass() のかっこの中に、この様に書きます。'selected' と書いておきます。この様にすることで、この this ですね。この this は span.topmenu のクリックされたそのものの要素にaddClass これは「class を追加しろ」という意味ですね。そして、この引数の中に入っているselectedこれは class の名前です。要するに、クリックされたspan.topmenu に「selected という名前の class を追加しろ」という命令になります。こうすることによって、スライドメニューが表示されているものに関してはトップメニューの要素にclass selected がついている状態になりますね。 それでは次に、この class selected がついているか、ついていないかというのをこのトップメニューをクリックした時に判別する方法について解説します。その処理はここに書いていきましょう。まずは変数を作ります。var そして変数の名前ですね、ここでは selected としておきましょうか。そして =$()そして、この中には this と入れます。そして .hasClass と書きます。そして ();そしてこのかっこの中にはselected と入れます。この様に書くことで、この this要するに span.topmenu のクリックされたそのものの要素ですね。それに hasClass要するに class を持っているかどうか。では何の class を持っているのかを確認するのかというと、こちらの selected という名前のclass という形になる訳ですね。そして、この命令の結果がこちらの変数 selected に入ってくる訳ですが、もし、クリックした要素そのものに対してselected という class が既にもう付いていた場合はこちらの変数 selected にはtrue が入ってきます。 逆に、クリックした要素にclass の selected が付いていなければ、こちらの selected 変数にはfalse が入ってきます。それでは、この選択状態ですね。今取得した、変数 selected がtrue なのか false なのかによって、処理を分岐させる方法について書いていきたいと思います。処理を分岐させる方法はif を使います。if(){}ですね。そして、波括弧の間に数行改行を入れておきましょう。そしてこの if の括弧の中、こちらには selected と入れておきましょう。そして、この最後の波括弧の後。ここには else と書いて更に {}そしてこの波括弧の間にも、改行を数行入れておきましょう。この様にすることで、こちらの変数 selected の値がtrue であれば、こちらの最初の波括弧の間。そしてそうでなくて、この selected の中に入っている値がfalse だった場合はこちらの else の後の波括弧の中の処理が実行されるという形になります。それでは、この条件分岐させたこちらの処理の中で、具体的にどのような処理を書いていくかというと、まず selected が true要するに既に選択されている状態。 更に言えば、スライドメニューが既に出てる状態のトップメニューをクリックした場合というのはこちらの最初の波括弧の間に書くのですが、こちらには、「スライドメニューを閉じる」といった処理を書きます。そして、この else の後。要するに selected がfalse の場合、というのは選択されていない状態、更に言えばスライドメニューが表示されていない状態ということですね。この中には「スライドメニューを表示させる」という処理を書いていくことになります。こちらの具体的な処理の書き方については以降のレッスンで解説をしていきます。以上でレッスンは終了です。今回は JavaScript と jQuery を使ってナビゲーションバーを実装するにあたり、クリックされたトップメニューの選択状態を設定、取得する方法、そして、その状態に応じた処理の分岐の方法について解説致しました。以降のレッスンでは、選択状態に応じて表示させたスライドメニューを非表示にするプログラムの書き方について解説していきますので、そちらも合わせてご覧ください。

JavaScript + jQueryで作るナビゲーションバー

このコースではJavaScriptとjQueryを使ってナビゲーションバーを作成します。スライドメニュー付きのナビゲーションバーの機能をJavaScriptとjQueryを利用して実装する方法について学びます。HTMLとCSSでのコーディングの仕方、クリックイベントの登録やクリック時のスライドメニューの表示の切り替え方法などを順を追って解説します。

57分 (11 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年03月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。