时间戳

首页 > 解决方案 > 选项卡按按钮显示，使用引导程序 5 不起作用？

javascript - 选项卡按按钮显示，使用引导程序 5 不起作用？

问题描述

我正在使用引导程序 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>

感谢您的努力！

标签： javascriptbootstrap-5

解决方案

您可以触发单击以模拟单击选项卡。

$(".register-btn").click(function () {
  $("#register-tab").trigger("click");
  $("#loginModal").modal("show");
});
$(".login-btn").click(function () {
  $("#login-tab").trigger("click");
  $("#loginModal").modal("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>

推荐阅读