2つのdivを切り替える方法

私は2つのdivを切り替えようとしています。たとえば、onload、左のコンテンツを表示し、正しいコンテンツを隠したままにします。右のdivをクリックすると、左のコンテンツを非表示にし、正しいコンテンツを表示し、その逆も欲しい。私は非常にjavascriptに新しいですが、ここに私が持っているものです。私はそれを働かせるように見えない。ここで2つのdivを切り替える方法

<div onclick="toggle_visibility('left');"> 
    Left 
</div> 

<div onclick="toggle_visibility('right');"> 
    Right 
</div> 


<div id="left" style="display: block;"> 
    This is the content for the left side 
<div> 

<div id="right" style="display: none;"> 
    This is the content for the ride side 
</div>

私はJavascript使用していますされています：

<script type="text/javascript"> 
    function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
     else 
     e.style.display = 'block'; 
    } 
    </script>

出典

2011-02-08 Ryan Bennett

ライブデモ2つのdiv要素の間で切り替えます：http://jsfiddle.net/PauWy/1/

HTML：

<p id="toggle"> 
    <span> Left </span> 
    <span> Right </span> 
</p> 

<div id="left"> LEFT CONTENT </div> 
<div id="right"> RIGHT CONTENT </div>

J avaScript：

$('#toggle > span').click(function() { 
    var ix = $(this).index(); 

    $('#left').toggle(ix === 0); 
    $('#right').toggle(ix === 1); 
});

CSS（右DIVのonloadイベントを非表示にする）：

#right { display:none; }

ページの下部にJavaScriptコードを入れてください。

SCRIPT要素がBODY要素の端部に配置されているかに注意してください。また、jQueryコードが準備完了ハンドラの内側にあることに注意してください。$(function() { ... code ... });

出典

2011-02-08 18:25:49

何らかの理由で、私は正確なコードをコピーしましたが、ローカルではなくjsfiddle.netで作業しています。 JQueryライブラリはそれに何らかの影響を与えますか？ –

@ Ryan上記のHTMLコードもコピーしましたか？どこにJavaScriptコードを配置しましたか（HEADまたはBODYの一番下）？ –

私はHTMLをコピーして、JavaScriptコードをHeadとHTMLの中に入れました。 –

あなたが唯一の2つの要素ごとの1のための可視性をトグルしている。ここ

は私のHTMLコードです...助けてください時間。あなたが左をクリックすると、それは消えますが、あなたは右の側に現れてはいけません。試してみてください：

<div onclick="toggle_visibility('left');toggle_visibility('right');"> 
    Left 
</div> 

<div onclick="toggle_visibility('right');toggle_visibility('left');"> 
    Right 
</div>

出典

2011-02-08 18:21:07 William

uが病気にjqueryの溶液に、あなたが開いていると仮定し、質問jqueryをタグ付けするので。これは非常に簡単になります。 ...以下のサンプルjsfiddleをチェックアウトコースの

http://jsfiddle.net/VztjL/

あなたはスタイリングのためのいくつかのCSSが必要になりますが、サンプル中のdivをクリックすると

出典

2011-02-08 18:22:48 stephen776

まずは終了タグがありません。厄介なもの、それら。

第2に、現在表示されているdivを隠すことができるようにする必要があります。次は動作するはずです。

<html> 
<head> 
<script type="text/javascript"> 
    top.visible_div_id = 'right'; 
    function toggle_visibility(id) { 
    var old_e = document.getElementById(top.visible_div_id); 
    var new_e = document.getElementById(id); 
    if(old_e) { 
     console.log('old', old_e, 'none'); 
     old_e.style.display = 'none'; 
    } 
    console.log('new', new_e, 'block'); 
    new_e.style.display = 'block'; 
    top.visible_div_id = id;   
    } 
    </script> 
</head> 
<body onload="toggle_visibility('left');"> 

<div onclick="toggle_visibility('left');"> 
    Left 
</div> 

<div onclick="toggle_visibility('right');" > 
    Right 
</div> 


<div id="left" > 
    This is the content for the left side 
</div> 

<div id="right" > 
    This is the content for the ride side 
</div> 

</body> 
</html>

出典

2011-02-08 18:30:57 bbrame

ここでは、2つのhtmlドキュメントを切り替える小さな例を示します。この関数は、本体がロードされるときに最初に呼び出されます。 Uは、1.htmlと2.htmlを2つのページに置き換える必要があります。あなたが長い遅延をしたい場合は、3000を任意のものに置き換えてください。タイマーの値はミリ秒単位であるため、20000秒にする場合は20000にします。

出典

2011-05-17 14:32:35 mezz

2つのdivを切り替える方法

答えて

関連する問題