Javascriptを使用して要素を非表示と表示

Question

私はAB Cのような水平メニューナビゲーションを持つページのヘッダを持っています。サブメニューD、E、BにはサブメニューFとGがあります。 hidden.now Bをクリックすると、DとEを非表示にしてFとGを表示する必要があります。それぞれのメニューがクリックされたときにサブメニューの表示プロパティを設定する小さな関数を作成しましたが、これは動作しますが、ページがロードされると、DとEが表示され、FとGが非表示になります。

どうすればこの問題をjavascriptで解決できますか？私はjsにとってとても新しいので、jqueryの点では考えていません。

Answer 1

可能であれば、新しいURLにハッシュ#を追加することができます。それを見て、JavaScriptを使って表示します。

擬似コード：Example Here - Source to example here

var hash = location.hash 
if(hash == '#menuA' || hash == '') { 
    //show menuA 
} else if(hash == '#menuB') { 
    // show B 
.....etc 

Answer 2

どのメニューが選択されているかに関する情報を持つクッキーを設定し、ページが読み込まれたときにクッキーを読み取り、メニューを適切に設定することができます。いくつかの素敵なクッキーカッター機能がここにあります：http://www.quirksmode.org/js/cookies.html

Answer 3

申し訳ありませんが、私は、私はあなたがぶっきらぼうしたいと思うものを達成するために十分にjQueryを知っています。 疑似コードが役立つかもしれません。あなたがサブメニューを作るために使ったhtmlを投稿すると助けになるかもしれません。

このサンプルでは、​​nav要素をページ上のオブジェクトに単に関連付けています。

SCRIPT（好ましくは外部の.jsファイル内のすべてのページによってリンク）：

//after you've set all sub-menus to display:none 

//for each nav element 
$('#nav a').each(function(){ //just like a for loop 
    var a,b; 
    // set a equal to the contents of the current nav element in the loop 
    a =$(this).html(); 
    //set b equal to the contents of the first <h2> element on the current page 
    //or to whatever you want to use to distinguish as "a match" (needs not be visible) 
    b =$('h2:first').html(); 
    //if the match is made... in this case, an exact match 
    if(a == b){ 
      //Here you would have your display children code 
      //or display D and E or F and G code, depending on how you've set it up    
     }else //code to execute if no match is made 
    }); 

私はチームプロジェクトのためにこれを把握しなければならなかった...私はあまりにも学ぶことがたくさん持っています。それを愛してください

Answer 4

これは実際にはjQuery経由で非常に簡単です。私は順序付けられていないリストとリスト項目hereで非常に基本的なメニューを嘲笑した。

あなたはJavaScriptについて非常に新しいことを述べていますが、私は確かに理解していますが、jQueryのようなフレームワークに精通していることは絶対に必要です。 jQueryのセレクタ機能は非常に強力です。