여러 div 간 전환

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> 

또한 여기에 자바 스크립트가 있습니다. 나는 toggle_visibility (id)를 사용하고있다. 문제는 하나의 상자를 숨기고 다른 상자를 열면 이상하게된다. 둘 다 열린 채로두고 닫습니다.

var prevId; 

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

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

} 

이 다른 사이를 전환 않지만 내가 전에 시도 또 다른 자바 스크립트 코드는,이 사람이 그냥 작업을 보여주고 숨길하지 않는 토글이하지 않는 유일한 것입니다, 그렇다고 잘 작동도 있습니다 작업. 대신 온 클릭의

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

, 나는 이벤트 핸들러 on()을 (인라인 - 자바 스크립트를 안)을 사용.

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

그리고 당신의 자바 스크립트에 약간의 변화 : 나는 데이터 속성이 coombine

$('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()을 통해 수행 할 수 있음). 제 코드는 상관 없습니다. 모든 것이 숨겨지고, 그저 1이 돌아올 것입니다.

Answer 2

나는 this jQuery Widget가 당신이 찾고있는 것이라고 생각합니다. 구현하기 쉽고 매우 유용합니다. 또한 jQuery API 지침을 통해 페이지에 쉽게 접근 할 수 있습니다.