在多個div之間切換

我遇到問題。我想在多個div之間切換，而其中一個顯示其餘的隱藏。這是我到目前爲止。在多個div之間切換

在此先感謝！

<a href="#n" onclick="toggle_visibility('box1');"> 
    <div class="square img_1-1"></div> 
</a> 

<a href="#n" onclick="toggle_visibility('box2');"> 
    <div class="square img_1-2"></div> 
</a> 

<a href="#n" onclick="toggle_visibility('box3');"> 
    <div class="square img_1-3"></div> 
</a> 

    <div id="box1" style='display:none;'> 
     <div class="trabajo"> 
      <p>box1</p> 
     </div> 
    </div> 

    <div id="box2" style='display:none;'> 
     <div class="trabajo"> 
      <p>box2</p> 
     </div> 
    </div> 

    <div id="box3" style='display:none;'> 
     <div class="trabajo"> 
      <p>box3</p> 
     </div> 
    </div> 

<a href="#n" onclick="toggle_visibility('box4');"> 
    <div class="square img_2-1"></div> 
</a> 

<a href="#n" onclick="toggle_visibility('box5');"> 
    <div class="square img_2-2"></div> 
</a> 

<a href="#n" onclick="toggle_visibility('box6');"> 
    <div class="square img_2-3"></div> 
</a> 

    <div id="box4" style='display:none;'> 
     <div class="trabajo"> 
      <p>box4</p> 
     </div> 
    </div> 

    <div id="box5" style='display:none;'> 
     <div class="trabajo"> 
      <p>box5</p> 
     </div> 
    </div> 

    <div id="box6" style='display:none;'> 
     <div class="trabajo"> 
      <p>box6</p> 
     </div> 
    </div>

此外，這裏是Javascript。我正在使用toggle_visibility（id）問題是，當我隱藏一個盒子並打開另一個盒子時，它開始出現奇怪現象，然後它會變得很奇怪。它將兩個都打開然後關閉一個。

var prevId; 

function toggle_visibility(id) { 
    if(prevId && id !== prevId){ 
     $("#"+prevId).toggle(); 
    } 
    var e = document.getElementById(id); 

    $(e).toggle(); 
    prevId = id; 

}

還有另一個javascript代碼我嘗試過，這一個工程八九不離十很好，它不會做的唯一事情是撥動它只是顯示的工作，並沒有隱藏它，雖然它不同之間切換工作。

top.visible_div_id = 'box1'; 
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;   
}

來源

2014-10-20 Luis Gonzalez

你能提供一個我們可以使用的代碼的jsfiddle嗎？ – Grice 2014-10-20 18:46:46

http://jsfiddle.net/luis4567/wj2zm0mq/1/ – 2014-10-20 19:22:17

取而代之的onclick的，我用了事件處理程序on()（你不應該內聯的JavaScript）。我coombine這與數據屬性：

<a data-toggles="#box2">box 2</a>

而且一些改變你的JavaScript：

$('a.triggeringAnchor').on('click', function(e){ 
    e.preventDefault() // stop the anchor 
    $('a.triggeringAnchor').hide(); // hide them all 
    $($(this).data('toggles')).show(); // bring the one back in the one back 
})

你可以使用:not()選擇，但是這是一個比較明顯的:)
訣竅這裏是'帶回'路線。我使用data-attribute的值作爲我們想要返回的實際元素的選擇器。

這段代碼比你的有很大的優勢。如果你再添加1個元素，你的計數器就會知道這個（可以通過.length()完成），我的代碼並不在意。一切都隱藏起來，只有那一個會回來。

來源

2014-10-20 18:47:31 Martijn

我認爲this jQuery Widget正是你要找的。易於實施，非常實用。另外，jQuery API指令使您可以輕鬆進入頁面。

來源

2014-10-20 20:37:11

在多個div之間切換

回答

相關問題