时间戳

首页 > 解决方案 > 防止引导 4 选项卡显示选项卡内容

jquery - 防止引导 4 选项卡显示选项卡内容

问题描述

所以我创建了一个带有 bootstrap 4 选项卡视图的索引页面，并且在每个选项卡上我添加了一个包含 X 的跨度，因此用户可以关闭该选项卡。

但是，当单击 X 时，选项卡内容仍然显示，我发现了一些与 bootstrap 3 类似的问题，这些问题引导我进入 JQuery

                <ul class="nav nav-tabs" role="tablist">
                    <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
                    <li id="usersTab" class="nav-item" style="display: none;"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(0)">X</span></a></li>
                </ul>

这些是我的标签，没什么特别的。

    function onCloseTabButtonClick(pageNumber) {
        switch (pageNumber) {
            case 0:
                document.getElementById("usersTab").style.display = "none";
                $('#userCreate-tab').on('click', function (event) { event.preventDefault(); });
                break;
        }
    }

这是我停止页面切换的尝试，我对 JQuery 很陌生，但据我所知，event.preventDefault();应该停止切换，但它仍然会通过。

我已经通过在其中抛出一个console.log 并触发了它来测试它，所以我知道我的点击事件确实有效。

更新

我试图将关闭事件传递给关闭选项卡功能

        <link href="../Content/site.css" rel="stylesheet"/>
        <link href="../Content/bootstrap.min.css" rel="stylesheet"/>
        <script src="../Scripts/jquery-3.4.1.min.js"></script>
        <script src="../Scripts/bootstrap.min.js"></script>

<script type="text/javascript">
            function onCloseTabButtonClick(event, pageNumber) {
                switch (pageNumber) {
                    case 0:
                        document.getElementById("usersTab").style.display = "none";
                        event.preventDefault();
                        break;
                    case 1:
                }
            }
</script>

            <div id="container-fluid">
                <div class="row">
                    <div class="col-md-12" style="padding-right: 0px;">
                        <ul class="nav nav-tabs" role="tablist">
                            <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
                            <li id="usersTab" class="nav-item" style="display: none;"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(event, 0)">X</span></a></li>
                        </ul>

                        <div class="tab-content">
                            <div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
                               <%-- Dashboard Page--%>
                            </div>
                            <div id="userCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="userCreate-tab">
                                <%--User Page--%>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

更新 2 尝试使用 JQuery 管理单击和隐藏事件

<script type="text/javascript">
            $("li.nav-item .tabCloser").click(function (e) {
                e.stopPropagation();
                $(this).parent().hide();
                var idHref=$(this).parent().attr("href");
                $(idHref).removeClass("active");
                console.log('JQuery Fired');
            })
</script>

   <ul class="nav nav-tabs" role="tablist">
       <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
       <li id="usersTab" class="nav-item"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span class="tabCloser">X</span></a></li>
    </ul>

标签： jqueryhtmlbootstrap-4

解决方案

这个怎么样？我更改了事件以传递事件数据onclick="onCloseTabButtonClick(event, 0)"并防止处理程序中的原始点击。

<li id="usersTab" class="nav-item"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(event, 0)">X</span></a></li>

    function onCloseTabButtonClick(event, pageNumber) {
        switch (pageNumber) {
            case 0:
                document.getElementById("usersTab").style.display = "none";
                event.preventDefault();
                break;
        }
    }

更新：

例子

    function onCloseTabButtonClick(event, pageNumber) {
        switch (pageNumber) {
            case 0:
                document.getElementById("usersTab").style.display = "none";
                event.preventDefault();
                break;
        }
    }
@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



 <ul class="nav nav-tabs" role="tablist">
                    <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
                    <li id="usersTab" class="nav-item"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(event, 0)">X</span></a></li>
                </ul>

推荐阅读