Question

这些是类似铬的标签。在此，当我点击第一个标签即Facebook标签时，它显示Facebook内容，当我点击第二个标签时，即在推特标签上显示第一个标签的内容，点击第三个第四个和第五个标签显示它们自己的内容，没有第三个第四和第五个标签的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();
     });
 });

jquery load tab-content onclick

1 个答案: