【发布时间】：2021-06-17 14:29:57
【问题描述】：
我正在使用 bootstrap 5，我有一个用于登录和注册的模式，但一个模式中有两个引导选项卡，我想按按钮单击显示选项卡，但这不起作用。
当我点击登录按钮时，内部模式登录选项卡应该是活动的，如果我点击注册按钮，那么内部模式注册选项卡应该是活动的。
在控制台中给出这个错误：- 未捕获的类型错误：无法读取 null 的属性“显示”
我的代码：
$('.register-btn').click(function() {
$('#loginModal').modal('show');
var triggerEl = document.querySelector('[data-bs-target="#register"]')
bootstrap.Tab.getInstance(triggerEl).show()
})
$('.login-btn').click(function() {
$('#loginModal').modal('show');
var triggerE2 = document.querySelector('[data-bs-target="#login"]')
bootstrap.Tab.getInstance(triggerE2).show()
})<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>感谢您的努力！
【问题讨论】：