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

Question

我有几个按钮设置，我可以让他们显示和隐藏divs点击该部分工作正常。但我想知道是否有可能让他们隐藏所有其他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插入，我们在第二步中使用它来添加“force to display”类。 （双钱标志）

如果您愿意，您可以随时使用类名获得更多创意！