问有没有一种方法只使用CSS来隐藏一个元素，而其他元素被显示？
EN

Stack Overflow用户

提问于 2021-04-16 18:21:42

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

我有这个HTML代码：

<div class="content">   
    <div id="loading-bar-container"></div>
        <div data-ng-view> </div>
    </div>
</div>

当前，id为loading-bar-container的div在页面加载时自动显示，在页面完全加载时隐藏(它是一个加载栏)。这是通过使用JQuery动态更改此元素的CSS属性display的值来实现的。

现在我还希望在显示加载栏的同时，下面的div (div data-ng-view)被自动隐藏，这样这个div在页面加载之前不会显示。我想只使用CSS+HTML来实现此行为。

html

css

angularjs

回答 1

Stack Overflow用户

发布于 2021-04-16 20:52:44

只需修改顶部的父元素，如下所示：

.content #loading-bar-container {
  display: none;
}
.content > div[data-ng-view] {
  display: block;
}

.content.is-loading #loading-bar-container {
  display: block;
}
.content.is-loading > div[data-ng-view] {
  display: none;
}

<!-- Toggle 'is-loading' class on loading, and remove it after loaded -->
<div class="content is-loading">   
    <div id="loading-bar-container">Loading</div>
    <div data-ng-view>Loaded</div>
</div>

票数 0

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

原文链接：

https://stackoverflow.com/questions/67123457

复制

相似问题

问有没有一种方法只使用CSS来隐藏一个元素，而其他元素被显示？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种方法只使用CSS来隐藏一个元素，而其他元素被显示？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有一种方法只使用CSS来隐藏一个元素，而其他元素被显示？
EN