4

2つのdivを切り替えようとしています。たとえば、onloadの場合、左側のコンテンツを表示し、右側のコンテンツは非表示のままにします。右のdivをクリックすると、左のコンテンツが非表示になり、右のコンテンツが表示されます。その逆も同様です。私はjavascriptに非常に慣れていませんが、これが私が持っているものです。私はそれを機能させることができないようです。助けてください...

これが私のHTMLコードです：

<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>
4

5 に答える 5

6

ライブデモ： 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>

JavaScript：

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

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

CSS（適切なDIVオンロードを非表示にするため）：

#right { display:none; }

ページの下部にJavaScriptコードを配置します。

    <script>
        $(function() {        
            // put jQuery code here    
        });
    </script>    
</body>

SCRIPT要素がBODY要素の最後にどのように配置されているかに注目してください。また、jQueryコードはreadyハンドラー内にある必要があることに注意してください。$(function() { ... code ... });

于 2011-02-08T18:25:49.087 に答える
3

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

      <html> 
        <head> 
         <script type="text/javascript"> 
          top.visible_id = 'right'; 

          function toggle_visibility() { 

             var right_e = document.getElementById('right'); 
             var left_e = document.getElementById('left'); 
            if (top.visible_id == 'right') {
              right_e.style.display = 'none'; 
              left_e.style.display = 'block'; 
              top.visible_id = 'left';
            } else {
              right_e.style.display = 'block'; 
              left_e.style.display = 'none'; 
              top.visible_id = 'right';
            }
            var t = setTimeout("toggle_visibility()",3000);
          } 

          </script> 
        </head> 
        <body onload="toggle_visibility();"> 

         <div id="left" > 
            <iframe src="1.html"></iframe>
         </div> 

         <div id="right" > 
            <iframe src="2.html"></iframe>
         </div> 

        </body> 
      </html>
于 2011-05-17T14:32:35.457 に答える
2

uが質問にタグを付けたのでjquery、jqueryソリューションにオープンであると想定します。これは非常に簡単になります。以下のサンプルjsfiddleをチェックしてください...

http://jsfiddle.net/VztjL/

もちろん、スタイリングにはいくつかのcssが必要ですが、サンプルのdivをクリックすると、2つのdivが切り替わります。

于 2011-02-08T18:22:48.640 に答える
1

手始めに、の終了タグがありません。厄介なもの、それら。

次に、現在表示されている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-08T18:30:57.513 に答える
0

毎回、2つの要素のうちの1つの可視性を切り替えるだけです。左側をクリックすると消えますが、右側に表示するように指示していません。試す：

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

<div onclick="toggle_visibility('right');toggle_visibility('left');">
  Right
 </div>
于 2011-02-08T18:21:07.703 に答える