文章/答案/技术大牛

发布

社区首页 >问答首页 >html5隐藏所有div并在单击按钮时显示一个

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

Stack Overflow用户

提问于 2019-03-14 05:33:54

回答 1查看 58关注 0票数 0

我设置了几个按钮，我可以让它们在点击时显示和隐藏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：

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

javascript

css

html

回答 1

Stack Overflow用户

发布于 2019-03-14 06:31:53

这是一个简单的例子。保留您的类和HTML标记，我将添加此css样式以强制元素为displayed..and，并使用jQuery根据需要添加/删除该类。

.unhide{
        display: block !important;
    }

接下来，在导入jQuery之后，使用这个短脚本来处理单击逻辑：

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

为了解释这里的逻辑，当任何按钮被单击时，我们首先删除我们刚刚创建的"force To display“类。然后，我们获得特定按钮的data-target，并将该值作为ID插入，然后在第二步中使用它添加"force to display“类。(两个钱的符号)

如果你愿意，你可以在类名上更有创意！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55151553

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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