示例

Question

因此，我使用引导程序4的选项卡视图创建了索引页，并且在每个选项卡上添加了一个包含X的跨度，以便用户可以关闭该选项卡。

但是，当单击X时，选项卡内容仍然显示，我发现了一些与引导程序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并触发了它来进行了测试，所以我知道我的click事件确实起作用。

如果有人可以指出正确的方向，我将不胜感激。

更新试图将close事件传递给close选项卡功能

        <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>

Answer 1

这个怎么样？我更改了事件以在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>

Answer 2

尝试以下代码：
HTML：

<ul class="nav nav-tabs" role="tablist">
  <li id="dashboardTab" class="nav-item" style="display: none;"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a><span class="x-close">X</span></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</a><span class="x-close">X</span></li>
</ul>
<div class="show-all">show all</div>

javascript：

$(document).ready(function() {
  $(".show-all").click(function() {
    $("li").show();
  });
  $(".x-close").click(function() {
    $(this).closest("li").hide();
  });
});

此代码中有一个div类的show-all。单击它会导致页面上所有li元素的显示。 span个元素具有类x-close。单击它会隐藏最近的元素li。
参见JSFiddle

Answer 3

只需删除容器的活动类

$("li.nav-item .tabCloser").click(function(e){
    e.stopPropagation();
    $(this).parent().hide();
    var idHref=$(this).parent().attr("href");
    $(idHref).removeClass("active");
})

尝试这个小提琴 https://jsfiddle.net/9hzymxs1/1/

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

3 个答案:

示例