html5 隐藏和取消隐藏 div 个元素

Question

考虑以下代码

@using App.Models
@model App.Models.AllPeopleViewModel

@{
    ViewBag.Title = "Index";
}
<html>
<head>

</head>
<body>
@foreach (Customer person in Model.Content)
{
<div class="card border-primary text-center">

    <div class="card-body">
        <h5 class="card-title">@Html.DisplayFor(modelItem => person.name)</h5>
        <p class="card-text">
            @Html.DisplayFor(x => person.houseNameOrNumber), @Html.DisplayFor(x => person.Street),
            @Html.DisplayFor(x => person.Town), @Html.DisplayFor(x => person.PostCode)
        </p>
       <div class="visually-hidden" id="call_button"></div><a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>
    </div>
    <div class="card-footer text-muted">
        Identifier - @Html.DisplayFor(modelItem => person.identifier)
    </div>
</div>

}
</body>
</html>

特别是行

<div class="visually-hidden" id="call_button"></div><a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>

我想隐藏这个按钮。我试过这个，我试过 d.none，但它们都不起作用。 Bootstrap cdn 包含在我的布局页面中并且可以正常工作，我知道这是因为卡片显示正确，但没有隐藏该按钮！我希望稍后能够通过 javascript“取消隐藏”它。我还希望隐藏元素不影响页面的呈现，直到我取消隐藏它，如果这有意义的话！

提前谢谢你，这个让我精神抖擞！

Answer 1

问题出在标记内，当前标记是：

<div class="visually-hidden" id="call_button">

</div>
<a href="tel:713-992-0916" class="btn btn-primary">Call Them</a>

意味着你隐藏了一个空 <div>。要隐藏 <a>，它应该在 .visually-hidden <div>.

内

此外，visually-hidden class 只会使元素不可见，但它仍然占用 space（对于只应对屏幕阅读器可见的元素很有用）。要完全隐藏它，请改用 d-none（或 display: none;）class。与 Bootstrap 无关，但有关 visibility: hidden; 与 display: none; 的更多信息：https://www.geeksforgeeks.org/what-is-the-difference-between-visibilityhidden-and-displaynone/

html5 隐藏和取消隐藏 div 个元素

html5 hide and unhide div elements

html

css

asp.net-mvc

bootstrap-5