jquery load 탭 콘텐츠 onclick

Question

이들은 크롬과 같은 탭입니다. 이 때 첫 번째 탭, 즉 페이스 북 탭을 클릭하면 페이스 북 컨텐츠가 표시되고 두 번째 탭을 클릭하면 트위터 탭에 첫 번째 탭의 컨텐츠가 표시되고 세 번째 네 번째 및 다섯 번째 탭에는 고유 한 컨텐츠가 표시되고 noissue는 없습니다 세 번째 네 번째 및 다섯 번째 탭이 있습니다. 그리고 첫 번째 탭에서 두 번째 클릭하면 내용이 표시되지 않습니다. 두 번째 탭에서도 마찬가지입니다.

HTML

<div class="box box-primary"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="tabs"> 
        <div class="tab fb-icon-color active" id="#tab1"> 
        <a href="#tab1"> 
         <div class="tab-box"> 
          <h3 style="text-align: center;margin-top: 15px;" class="facebook"> 
           <i class="fa fa-facebook" title="Facebook"></i> 
          </h3> 
         </div> 
         </a> 
        </div> 
        <div class="tab twitter-icon-color"> 
         <a href="#tab2"> 
         <div class="tab-box"> 
          <h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-twitter" title="Twitter"></i></h3> 
         </div> 
         </a> 
        </div> 
        <div class="tab google-plus-icon-color"> 
         <a href="#tab3"> 
         <div class="tab-box"> 
          <h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-google-plus" title="Google+"></i></h3> 
         </div> 
         </a> 
        </div> 
        <div class="tab crawl-icon-color"> 
         <a href="#tab4"> 
         <div class="tab-box"> 
          <h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-bug" aria-hidden="true" title="Crawling"></i> 
         </div> 
         </a> 
        </div> 
        <div class="tab video-icon-color"> 
         <a href="#tab5"> 
         <div class="tab-box"> 
          <h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-video-camera" title="Youtube"></i></h3> 
         </div> 
         </a> 
        </div> 
       </div> 
       <div class="tabs-content pane"> 
        <!-- first Pane --> 
       <div id="tab1" > 
        <%= render :partial =>"fb_tab"%> 
       </div> 
       <div id="tab2" style="display: none;"> 
        <%= render :partial =>"twitter_tab"%> 
       </div> 
       <div id="tab3" style="display: none;"> 
        <%= render :partial =>"gplus_tab"%> 
       </div> 
       <div id="tab4" style="display: none;"> 
        <%= render :partial =>"crawled_tab"%> 
       </div> 
       <div id="tab5" style="display: none;"> 
        <h1> youtube</h1> 
       </div> 
       </div> 
    </div> 
    </div> 

JAVASCRIPT

<script> 

$(document).ready(function(){ 
$('.tab').click(function(){ 
    $('.tab').removeClass('active'); 
    $(this).addClass('active'); 
    $(".tabs a").click(function() { 
     $(".pane div").hide(); 
     $($(this).attr("href")).show(); 
    }); 
}); 

    }); 
</script> 

CSS

.tabs { 
    height:45px; 
    padding: 1px 0 0 0; 
    overflow:visible; 
} 
.tab { 
    width:246px; 
    height:45px; 
    overflow:hidden; 
    float:left; 
    margin:0 -15px 0 0; 
} 


.tab-box { 
    height:50px; 
    background: rgba(60, 141, 188, 0.87); 
    border-radius: 4px; 
    border:1px solid #ccc; 
    margin:0 13px 0; 
    box-shadow: 0 0 2px #fff inset; 
-webkit-transform: perspective(100px) rotateX(30deg); 
-moz-transform: perspective(100px) rotateX(30deg); 

} 

.tab.active { 
    z-index:40; 
    position:relative; 
    padding-bottom:1px; 
} 
.tab.active .tab-box{ 
    background-color: #ECF0F5; 
    @include background-image(linear-gradient(top, #ccc , #ddd 3%, rgba(#eee, 0.5) )); 
    box-shadow: 0 0 2px 0 #fff inset; 
} 

.tabs-content.pane { 
    z-index:1; 
    padding:15px; 
    border:1px solid #ccc; 
    background:#ECF0F5; 
} 

Answer 1

문제는 당신이 근래이다 중첩 클릭 핸들러를 사용해보십시오.

$(document).ready(function() { 
    $(".tabs a").click(function(event) { 
     event.preventDefault(); 
     $('.tab').removeClass('active'); 
     $(this).parent().addClass('active'); 
     $(".pane div").hide(); 
     $($(this).attr("href")).show(); 
    }); 
});