css - Twitter bootstrap 选项卡的内容正在混合

Question

我在使用 Twitter Bootstrap 创建网站方面还是个新手。我本来打算有一个包含学生评估的选项卡，但即使 ID 正确，我的选项卡的内容也在混合。例如，付款历史的内容可以在其他选项卡中看到，尽管我没有遗漏任何开始和结束标签。那里的值仍然是虚拟数据。这是代码:

<section id="main-content" " ng-controller="studCtrl">
        <section class="wrapper">
            <div class="content-panel"> 
                <div class="row mt">
                    <div class="col-lg-12">
                        <h2>Student's Assessment</h2>
                        <ul class="nav nav-pills">
                            <li class="active"><a href="#distribution" data-toggle="tab">Distribution</a></li>
                            <li class=""><a href="#misc-fees" data-toggle="tab">Miscellaneous Fees</a></li>
                            <li class=""><a href="#other-fees" data-toggle="tab">Other Fees</a></li>
                            <!--<li class=""><a href="#iMent" data-toggle="tab">Installment Fees</a></li-->
                            <li class=""><a href="#payment-hist" data-toggle="tab">Payment History</a></li>
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="distribution">
                                <div class="table-responsive">
                                            <table class="table table-striped table-bordered table-hover">
                                                <thead>
                                                    ...
                                                </thead>
                                                <tbody>
                                                    ...
                                                </tbody>
                                            </table>
                                        </div><!--table-responsive-->
                            </div>
                            <div class="tab-pane fade" id="misc-fees">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                            ...
                                        </thead>
                                        <tbody>
                                            ...
                                        </tbody>
                                    </table>
                                </div><!--table-responsive--> 
                            </div>

                            <div class="tab-pane fade" id="other-fees">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                            ...
                                        </thead>
                                        <tbody>
                                            ...
                                        </tbody>
                                    </table>
                                </div>
                            </div>



                            <div class="tab-pane fade" id="payment-hist">
                                payment history
                            </div><!--payment history-->

                        </div><!-- end of tab content-->

                    </div><!--col-lg-12-->
                </div> <!--row mt-->
             </div><!--content-panel-->
        </section><!--/wrapper -->
    </section> <!--main-content-->

Answer 1

<section id="main-content" " ng-controller="studCtrl">

这里的代码多了一个双引号。首先，您应该移除标志。

但万一移除标志后仍然无法正常工作，我建议您可以使用浏览器(chrome/firefox/...)中的开发工具检查 DOM 结构。