Bootstrap导航标签（Nav Tabs）适配动态内容失效问题求助

我来帮你排查下动态生成Bootstrap标签页没生效的问题，通常这类问题都是细节没处理到位，咱们一步步来：

1. 修正aria-controls的格式错误 #

你代码里的aria-controls="#{{ $faq->id }}"多了个#前缀！这个属性是用来指定对应面板的id值，不需要加#，正确写法应该是：

<a href="#{{$faq->id}}" aria-controls="{{ $faq->id }}" role="tab" data-toggle="tab">{{ $faq->title }}</a>

2. 确保内容区的tab-pane结构正确 #

标签页的内容面板必须包裹在tab-content容器里，每个面板要有tab-pane类，并且第一个面板要加上active类，id要和tab项的href完全对应（比如href是#faq1，面板id就是faq1）。完整的内容区代码应该是这样：

<div class="col-md-9">
    <div class="tab-content">
        @foreach($faqs as $count => $faq)
            <div role="tabpanel" class="tab-pane @if($count == 0) active @endif" id="{{ $faq->id }}">
                <!-- 这里放对应FAQ的内容 -->
                <p>{{ $faq->content }}</p>
            </div>
        @endforeach
    </div>
</div>

3. 检查Bootstrap依赖是否正确加载 #

Bootstrap的标签页功能依赖jQuery和Bootstrap自身的JS文件，一定要确保加载顺序正确：

<!-- 先加载jQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- 再加载Bootstrap JS -->
<script src="path/to/bootstrap.min.js"></script>
<!-- 最后加载自定义JS（如果有的话） -->

4. 手动初始化标签页（可选，解决冲突问题） #

如果页面里有其他JS插件和Bootstrap的tab组件冲突，可以试试手动初始化标签页，在页面底部添加这段JS：

$(document).ready(function() {
    $('.nav-tabs a').on('click', function(e) {
        e.preventDefault();
        $(this).tab('show');
    });
});

按照上面的步骤调整后，动态生成的标签页应该就能正常切换啦～

内容的提问来源于stack exchange，提问作者mafortis