Question

我设置了几个按钮，单击它们可以显示和隐藏div，从而使该部分工作正常。但是我想知道是否有可能在显示一个div时也隐藏所有其他div，以便在加载时显示divone。

按钮：

<button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#divone">One</button>
        <button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#divetwo">two</button>
        <button class="btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#divthree">Threee</button>

细分：

<div id="divone" class="collapse">div one here</div> <div id="divetwo" class="collapse">div twohere</div> <div id="divthree" class="collapse">div three here</div>

Answer 1

这很简单。保留您的类和HTML标记，我将添加此CSS样式以强制显示元素。并根据需要使用jQuery添加/删除该类。

.unhide{
        display: block !important;
    }

接下来，在导入jQuery之后，使用以下简短脚本处理点击逻辑：

<script type="text/javascript">
    $(".btn").click(function(){
        $('.collapse').removeClass('unhide');
        $($(this).data("target")).addClass('unhide');
    })
</script>

为解释此处的逻辑，单击任何按钮时，我们首先删除刚刚创建的“显示力”类。然后，我们获得该特定按钮的数据目标，并将该值作为ID插入，然后在第二步中使用它来添加“显示力”类。（双钱标志）

如果愿意，您总是可以通过班级名称获得更多创意！

html5隐藏所有div并在单击按钮时显示一个

1 个答案: