Переключить между несколькими divs

Question

У меня проблема. Я хочу переключаться между многими 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;   
} 

Answer 1

Вместо OnClick, я использовал EventHandler 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 как селектор для фактического элемента, который мы хотим вернуть.

Этот код имеет большое преимущество перед вами. Если вы добавите еще один элемент, ваш счетчик будет знать об этом (может быть сделано через .length()), мой код все равно. Все спрятано, и только 1 вернется.

Answer 2

Я думаю, что this jQuery Widget - это именно то, что вы ищете. Простота в использовании и очень удобная. Кроме того, инструкции API jQuery дают легкий доступ к вашей странице.