2014-03-12 3 views
0

버튼을 클릭하면 한 테이블이 숨겨지고 다른 테이블이 표시되므로 문제가 있습니다. I는 테이블 ID = "1"이 첫번째 테이블 및 테이블 ID에 대해 = "2를 사용하고테이블 전환기 숨기기 테이블

<div id="container">  
    <table id="1" div id="table3"> 
     <div class="table_2col"> 
      <div class="caption"> 
       <ul> 

      </div><!--/ column 3-->  
      <div class="clear"></div> 
     </div><!--/. table_3col--> 

     <div class="table_4col"> 
      <div class="caption"> 

: 여기

여기서 메인 코드 비트 인 DEMO

에 대한 링크이며 "두 번째지만,이 일을하는 것은 CSS 스타일을 없애는 것 같습니다.

CSS는 :

a.button{  
    color: white; 
    padding: 0.5rem; 
    border-radius: 5px; 
    text-decoration: none; 
    &:hover; 
} 
a.button:nth-child(1){ 
    background-color: #FA202B; 
} 

자바 스크립트 :

(function() { 
    var tables = $("table"); 
    //Grabs all the tables 
    tables.hide().first().show(); 
    //Hides all the tables except first 
    $("a.button").on("click", function() { 
     //Adds eventListner to buttons 
     tables.hide(); 
     //Hides all the tables 
     var tableTarget = $(this).data("table"); 
     //Gets data# of button 
     $("table#" + tableTarget).show(); 
     //Shows the table with an id equal to data attr of the button 
    }) 
})(); 
+0

바이올린은 끔찍하고 ** 정말 오래되었습니다 ** ... 아무도 그 모든 것을 읽지 않을 것입니다. 중요한 부분 만 게시하십시오. 게다가, 나는 어떤 테이블도 보지 않으며, image/css/js 링크는 JSFiddle에서 작동하지 않는 상대적입니다. – David

답변

0

나는 현재 테이블에 최우선 "볼 수"클래스를 추가 할 수 jQuery Toggle Class를 사용하여 다음 display:none; 모든 테이블을 설정하고있다.