如何切換兩個div

我想切換兩個div。例如，onload，我想要顯示左側內容，正確的內容將保持隱藏狀態。如果我點擊右邊的div，我想讓左邊的內容隱藏並顯示正確的內容，反之亦然。我對JavaScript非常陌生，但這裏是我的。我似乎無法得到它的工作。請幫助...如何切換兩個div

這裏是我的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>

來源

2011-02-08 Ryan Bennett

現場演示之間切換：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>

Ĵ avaScript：

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

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

CSS（躲右DIV的onload）：

#right { display:none; }

把JavaScript代碼在頁面的底部。

注意腳本元素是如何位於主體元件的端部。另外，請注意，jQuery代碼應位於ready handler中：$(function() { ... code ... });

來源

2011-02-08 18:25:49

出於某種原因，我複製了確切的代碼，它不是在本地工作，但正在jsfiddle.net。 JQuery庫對它有什麼影響嗎？ – 2011-02-08 20:41:23

您只能切換能見度爲每個2元的1時間。當你點擊左側時，它會消失，但你沒有告訴右側出現。嘗試：

<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

由於你標記了問題jquery病假設你打開一個jQuery解決方案。這將使這非常簡單。看看下面的樣本的jsfiddle ...

http://jsfiddle.net/VztjL/

當然

你會需要一些CSS的樣式，但點擊該樣品在div將兩個div

來源

2011-02-08 18:22:48 stephen776

對於初學者，缺少結束標記。麻煩的東西，那些。

其次，您需要跟蹤當前可見的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

這是一個在兩個html文檔之間切換的小例子。該函數首先在身體加載時調用。你需要用你想翻頁的兩頁來替換1.html和2.html。如果你想要更長的延遲，把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-17 14:32:35 mezz

如何切換兩個div

回答

相關問題