どのように2つのdivを作成すれば、1つしか表示されず、リアルタイムでスワップすることができますか？

私はこのようなことを試していますが、うまくいかないようです。どのように2つのdivを作成すれば、1つしか表示されず、リアルタイムでスワップすることができますか？

JS：

<script type="text/javascript"> 
    function recent() { 
    document.getElementById('top').style.display = "none"; 
    document.getElementById('recent').style.display = "block"; 
    alert('Recent'); 
    } 
    function top() { 
    alert('Top'); 
    document.getElementById('recent').style.display = "none"; 
    document.getElementById('top').style.display = "block"; 
    } 
    </script>

HTML：

<div id="content"> 
    <div id="header"><a href="#" onClick="javascript:recent();">Recent</a> | <a href="#" onClick="javascript:top();">Top rated</a></div> 
    <div id="top"> 
    <p>TOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div id="recent"> 
    <p>RECENT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    </div>

はCSS：、

#top {display:none}

任意の助けいただければ幸いです。

EDIT

私はFirefoxでそれを試してみましたが、正常に動作します。新しい質問。なぜそれがオペラで動作しないのですか？

出典

2011-07-15 Gabor Magyar

私は、「トップ」は予約語のように動作していることを知りましたが、これについて一貫したドキュメントを見つけることはできませんが、「トップ"function to" show_top "、問題を修正します。

Mozilla Firefox 5.0、IE9、Opera 11.50、Chromium（Google Chrome）でテスト済み12.0.742.112

この変更を加えなくても、Mozilla FirefoxとChromiumで動作します。

更新：http://www.dotnetspider.com/forum/179582-top-javascript.aspx

更新＃2：ユーレカドキュメントのまだ貧しい代わりに、私は「トップ」のいくつかの説明を与える1ページを発見しました！この1は本当に私を悩ませたので、私はドキュメントを見つけた... Dottoro.com, window object:

から

現在のウィンドウのメンバーははあなたが使用できるプレフィックス（例えばとしてウィンドウオブジェクトを使用せずに、直接アクセスできますウィンドウのオブジェクト（var x = 2; alert （window.x）;）からもアクセスできるです。

Dottoro.com, top property

出典

2011-07-16 00:30:12

oh myそれはうまくいく！まあそれは本当の痛みだった...誰も私にこれを言及したことは...ありがとうたくさんの男！あなたは本当にさらに多くのトラブルから私を救った... :) –

もう一度おかげさまで、魅力のように動作します！ –

エラーコンソールを使用してみてください。

間違えているのは、onClickハンドラの「javascript：」の部分です。 onClick内のものはすべてjavascriptです。

また、私はあなたがが、それは学習の目的のために、生のjavascriptを開始する悪い考えではありません

$('#recent').show(); 
$('#top').hide();

ような素敵なステートメントを使用することが可能にする、jQueryのを使用してお勧めしたいです。

出典

2011-07-15 11:24:23 graup

すでにスクリプトでrecentとtop関数を十分早く定義している限り、それはうまくいくはずです。

これはrunning fine on JSFiddleです（ただし、左側の設定値を確認してください）。

出典

2011-07-15 11:26:07 Jon

IDK、そのどちらかが私のために働いていません。私はオペラを使っています。それは問題になることができますか？それ以外の場合は –

javascript:が問題です。これは、onclick属性の構文が正しくありません。これは、人々がJavaScriptをhref属性に入れるときに使用していたものでした。それを取り除くとうまくいくはずです。デモの作業

出典

2011-07-15 11:26:55

を削除しようとしていますが、まだ同じ –

：http://jsfiddle.net/hFUhA/

いくつかのポイントを...

recent = function(){}は、それが明示的に

の機能の範囲を定義することができますよう、偽のを返すために良い機能のためのより良い構造でありますクリックイベントは、デフォルトの動作を防止するために使用します。onClick="top(); return false;"

およびjavascript:はonClickでは必須ではなく、hrefのみでほとんどの状況でjavascriptを実行する）

出典

2011-07-15 11:28:24

は、まだ何も起こりません... –

作業デモ –

まあ、私は本当にコードで問題は表示されません。問題はなんですか？両方のdivが最初に表示されていますか？そうであれば、＃style = 'display：none' "で#top要素にインラインスタイルを追加するだけです（起動時に1つしか表示されないように...）

出典

2011-07-15 11:28:34

私はあなたの「onClickのは」小文字である必要があります『ということだと思います。onclickの』ところで、あなたのコードにはfalseを返し追加する必要があります。

<a href="#" onclick="recent();return false;">Recent</a>

出典

2011-07-15 11:34:05 lookfire

を見てください（もう2人のPplは今私に警告しました）、まだ何も起こりません –

次のコードは、Firefoxで動作します：

<html> 
<head> 
<script type="text/javascript"> 
    function recent() { 
    document.getElementById('top').style.display = "none"; 
    document.getElementById('recent').style.display = "block"; 
    } 
    function top() { 
    document.getElementById('recent').style.display = "none"; 
    document.getElementById('top').style.display = "block"; 
    } 
    </script> 
</head> 
<body> 
<div id="content"> 
    <div id="header"><a href="#" onclick="recent();return false;">Recent</a> | <a href="#" onclick="top();return false;">Top rated</a></div> 
    <div id="top"> 
    <p>TOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div id="recent"> 
    <p>RECENT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    </div> 

</body> 
</html>

出典

2011-07-15 13:09:50 lookfire

どのように2つのdivを作成すれば、1つしか表示されず、リアルタイムでスワップすることができますか？

答えて

関連する問題