jquery Show(), hide() 및 toggle()로 어려움을 겪고 있습니다.

Question

일부 기능/웹 사이트를 구축하면서 도움을 얻을 수 있습니다. 나는 그것을 필요로하는 방식으로 작업하게 만들었지 만, 그것은 정말 원유 적이므로 청소기를 만드는 데 도움이된다고 생각합니다.

여기에 HTML이 있습니다. 여기

및 탭 에서

 <div class="large-5 columns"> 
      <div id="t1" class="t1"> 
      <h3> 
       <a href="#"> 
       Link one 
       </a> 
      </h3> 
      <p id="r1"> 
       Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p> 
      </div> 
<div id="t2" class="t2"> 
      <h3> 
       <a href="#"> 
       Link two 
       </a> 
      </h3> 
      <p id="r2"> 
       Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p> 
      </div> 
     </div> <div id="imageone" style="display:none"> 

첫 번째 이미지는 JQuery와 있습니다 : 나는 더 많은 탭이 있지만 지금이처럼 유지됩니다. 여기

<script> 
$("#t1 a").click(function() { 
$("#r1").toggle() 
$("#r2").hide() 
$("#imageone").show() 
}); 


</script> 

는 내가 일을해야하는지 작동하지만, 나는 내 자바 스크립트의 측면에서 정말 원유의 기분하는 JSFIDDLE이며, 그 누구도 날이 간단 코드로 재 작성하는 데 도움 수 있습니까? http://jsfiddle.net/2jbf9cx0/

Answer 1

당신은 데이터가 코드에 추가 수정을위한 바이올린에 HTML을 확인

$(".mytabs p").hide() 
     $('.t').on('click', function() { 
      $('.t p, .timg').hide(); 
      $(this).find('p').show(); 
      $('.timg[data-tag=' + $(this).data("tag") + ']').show(); 
    }); 

http://jsfiddle.net/2jbf9cx0/2/ 속성 사용하고 있습니다 :

Answer 2

비슷한 항목이있을 때 절대 ID에 하드 와이어하지 않아도됩니다. 클래스와 계층을 사용하여 일치하는 요소를 찾을 수있는 단일 처리기를 사용합니다.

JSFiddle : http://jsfiddle.net/2jbf9cx0/4/

주석 코드 : 여기

// Initial hide of all .info paragraphs 
    $(".info").hide() 

    // If any anchor in a .tab is clicked 
    $(".tab a").click(function() { 
     // Find the closest ancestor .tab 
     var $tab = $(this).closest('.tab'); 

     // then the .info in that .tab 
     var $info = $tab.find('.info'); 

     // Hide all the other infos (not excludes the target one) 
     $('.info').not($info).hide(); 

     // Toggle the specific info 
     $info.toggle(); 

     // Use a the id of the tab to find a matching image with data-id attribute 
     var $image = $('[data-id=' + $tab.attr('id') + ']'); 

     // Hide all but the selected image 
     $('images').not($image).hide(); 

     // Show the selected image (or toggle if you prefer) 
     $image.show(); 
    });