Q: jquery load tab-content onclick These are chrome-like tabs. In this when i click on first tab i.e. facebook tab it shows facebook content and when i click on second tab i.e. on twitter tab it shows first tab's content and while clicking on third fourth and fifth tabs it shows their own content, there is no noissue with third fourth and fifth tabs. 
And when clicking second time on first tab it shows no content. same is the issue with second tab.
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;  
}


A: The problem is that you have nested click handlers, please try this:
 $(document).ready(function() {
     $(".tabs a").click(function(event) {
         event.preventDefault();
         $('.tab').removeClass('active');
         $(this).parent().addClass('active');
         $(".pane div").hide();
         $($(this).attr("href")).show();
     });
 });

