2011-01-01 21 views
1

私は2つのナビゲーションボタン、 'a'と 'b'を持っています。 'a'はページ 'A'にリンクし、 'b'はページ 'B'にリンクします。ページが読み込まれると、ページ 'A'がデフォルトで表示され、ページ 'B'はデフォルトで非表示になります。リンク 'b'をクリックすると、ページ 'A'は不透明度0にフェードアウトされ、ページ 'B'は不透明度1にフェードインされ、高さはフルサイズに拡大され、jQueryの 'toggle' jQueryの 'toggle'メソッド。リンク 'a'をもう一度クリックすると、同じ方法でページ 'b'がもう一度見えなくなり、ページ 'a'が元の位置に戻ってくると、逆のことが起こります。JavaScript関数内で新しい変数値を設定するにはどうすればよいですか?

私が問題を抱えているのは、表示されている現在のページへのリンクをもう一度クリックすると、現在のページが空白になります。ページ 'A'が既に読み込まれていて、リンク 'a'をクリックすると、ページ全体が空白になります。これは望ましくありません。私がしようとしたことは以下の通りです:

var i = "a"; 

function a() { 
    if (i != "a") { 
    var i = "a";  
    jQuery(animation to hide page 'A'); 
    jQuery(animation to make visible page 'B'); 
    } 
} 

function b() { 
    if (i != "b") { 
    var i = "b"; 
    jQuery(animation to hide page 'B'); 
    jQuery(animation to make visible page 'B'); 
    } 
} 

私は「私は」私は関数内で設定することを変数の値が関数内および関数の外で、変数の値として残るのみ有効であることを考え出しました'a'、したがってリンク 'a'は決してクリック可能ではなく、リンク 'b'は常にクリック可能であり、結果として空白のページにもなります。

私はそれをやりたいことをするために正しいjavascriptを書くことができますか?

答えて

6

キーワードvarを両方の機能の中にドロップすると、グローバルi変数が変更されます。

あなたのコードは、あなたがfunctionからiを割り当てているので、あなただけの文字列を使用するように変更する場合があります実際には非常に紛らわしいですので、同じよう:

var i = "a"; 

function a() { 
    if (i != "a") { 
    i = "a";  
    jQuery(animation to hide page 'A'); 
    jQuery(animation to make visible page 'B'); 
    } 
} 

function b() { 
    if (i != "b") { 
    i = "b"; 
    jQuery(animation to hide page 'B'); 
    jQuery(animation to make visible page 'B'); 
    } 
} 
5

あなたは、私が再び新しい変数を定義しています関数はあなたが私の前にvarを使っているからです。 次のように変更してください。

var i = a; 

function a() { 
    if (i != a) { 
    i = a;  
    jQuery(animation to hide page 'A'); 
    jQuery(animation to make visible page 'B'); 
    } 
} 

function b() { 
    if (i != b) { 
    i = b; 
    jQuery(animation to hide page 'B'); 
    jQuery(animation to make visible page 'B'); 
    } 
} 
関連する問題