使用 Jquery 在页面加载上隐藏 div答案

【问题标题】：To hide a div on Page Load using Jquery使用 Jquery 在页面加载上隐藏 div
【发布时间】：2015-07-01 14:03:33
【问题描述】：

我的代码中有一些 div，如下所述。通过 Jquery，我想隐藏具有 class="redCategory redCap vertical" 的 div。我要隐藏的 Jquery 代码 div 是 $(".redCap").hide(); 但页面加载后 div 没有被隐藏。 Jquery应该是什么？我想在页面加载期间隐藏 div。

<div class="redLinkContainer">

    <span class="accessibleText" aria-level="1" role="heading"></span>
    <div class="redCategory redHome adjacent"><a> href="https://example.com/">1</a></div>
    <div class="redCategory redContact adjacent"><a> href="https://example.com/">2</a>></div>
    <div class="redCategory Things adjacent"><a> href="https://example.com/">3</a></div>
    <div class="redCategory redCap vertical">
        <a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a>
          </div>
     <div class="redCategory ManyThings adjacent"><a> href="https://example.com/">5</a></div>
    </div>

【问题讨论】：

你能告诉我们你的完整js代码吗？
我认为这取决于您将 JavaScript 代码放在哪里。在 HTML 之前？它会触发得太早。
你是否在页面加载后隐藏了 div ，即在 $(document).ready(function(){ $(".redCap").hide(); });还是不使用文档就绪功能？如果您不使用准备好的文档，它将无法正常工作。还有任何 JS 可以取消隐藏所有 div 吗？这可能与 hide 冲突。分享您的代码将有助于更多识别？

标签： javascript jquery jquery-ui redcap

【解决方案1】：

把隐藏在div中：

<div class="redCategory redCap vertical" hidden>
        <a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a>
          </div>

【讨论】：

【解决方案2】：

将此添加到 css 文件中

.divHide{display:none;}
.divShow{display:block;}

您的 HTML 代码：

<div class="redLinkContainer divHide"></div>

当页面加载 div 被隐藏时。

【讨论】：

【解决方案3】：

<a> 标签格式错误。请使用正确的格式

<a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a>

请找到以下网址，（检查您的代码）

https://jsfiddle.net/wg62c8j5/

【讨论】：

【解决方案4】：

我在这里做了一些测试，它按预期工作。

<script type="text/javascript">

 $(".redCap").hide();

</script>

<div class="redLinkContainer">

    <span class="accessibleText" aria-level="1" role="heading"></span>
    <div class="redCategory redHome adjacent"><a>   href="https://example.com/">1</a></div>
    <div class="redCategory redContact adjacent"><a> href="https://example.com/">2</a></div>
    <div class="redCategory Things adjacent"><a> href="https://example.com/">3</a></div>
    <div class="redCategory redCap vertical">
       <a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a>
      </div>
  <div class="redCategory ManyThings adjacent"><a> href="https://example.com/">5</a></div>

您确定正在加载您的 JQuery 库吗？

【讨论】：