Laravel中foreach生成的Bootstrap标签页点击无响应求助

不需要额外编写JavaScript代码，你的问题出在HTML结构错误上，Bootstrap 5的标签页组件只要结构正确、引入了官方JS文件（包含Popper）就能正常工作。

核心错误点： #

• 导航链接重复定义了data-bs-toggle="tab"属性，属于冗余代码
• 标签内容容器（.tab-pane）存在重复id属性，且第一个id错误添加了#前缀（id本身不能包含#，href中的#是锚点标识，对应容器的纯id值）

修正后的代码： #

<div class="col-sm-12">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        @foreach($state as $item)
        <li role="presentation" class="nav-item">
            <a class="nav-link {{ $loop->first ? 'active show' : ''}}" data-bs-toggle="tab"
                href="#{{$item->id}}">{{$item->name}}</a>
        </li>
        @endforeach
    </ul>
    <div class="tab-content" id="pills-tabContent">
        @foreach($state as $item)
        @php
        // 建议在控制器中用预加载优化查询，避免N+1性能问题
        $agent = \App\Models\Agent::where('state_id', $item->id)->get();
        @endphp
        <div id="{{$item->id}}" class="tab-pane fade {{ $loop->first ? 'active show' : ''}}"
            role="tabpanel">
            @foreach($agent as $items)
            <p>{{$items->name}}</p>
            @endforeach
        </div>
        @endforeach
    </div>   
</div>

额外优化建议： #

1. 确保资源引入正确：项目中必须引入Bootstrap 5的CSS和JS文件，且JS文件需包含Popper（Bootstrap 5依赖Popper处理标签页、弹窗等交互逻辑）
2. 优化数据库查询：避免在Blade模板的foreach循环内执行查询，会引发N+1性能问题。建议在控制器中使用关联预加载：

// 控制器代码示例
use App\Models\State;

// 假设State模型已定义agents关联（public function agents() { return $this->hasMany(Agent::class); }）
$state = State::with('agents')->get();
return view('你的视图名称', compact('state'));

模板中直接调用预加载的关联数据：

@foreach($item->agents as $items)
<p>{{$items->name}}</p>
@endforeach

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