Question

我试图在我的HTML代码中隐藏一个部分，但我已经尝试了所有内容，我甚至使用了jQuery，但它不起作用，它无论如何都不会隐藏它。

<div class="coding2">
        <div class="box">
            <div class="JavS">
                <h1>JavaScript</h1>
                <span class="barr"></span>
                <p>bla bla bla bla bla</p>
            </div>
            <div class="htmlCSS">
                <h1>HTML/CSS</h1>
                <span class="barr"></span>
                <p>bla bla bla bla bla </p>
            </div>
            <div class="php">
                <h1>PHP</h1>
                <span class="barr"></span>
                <p>bla bla bla bla bla</p>
            </div>
        </div>
    </div>

这是HTML文件的顶部，我不认为问题就在这里。

<head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="jquery-2.2.3.min.js"></script>
    <script src="main-jquery.js"></script>
</head>

我已经尝试过像我说过的所有内容，通常我会在尝试问某个地方之前把它搞砸了，但这一次，我无法弄清楚它为什么不隐藏。

@edit

我试过的代码＆＃34; main-jquery.js＆＃34;

（使用jQuery）

$(function(){
    $('.coding2').hide();
});

（使用纯JavaScript）

document.getElementById(".coding2").style.visibility = "none";

和

document.getElementById("#coding2").style.visibility = "hidden";

（是的，我最后一次编辑课程的时间是＆＃34;编码2＆＃34;到id =＆＃34;编码2＆＃34;但它没有做任何事情）

我想隐藏整个div＆＃34; coding2＆＃34;

@ EDIT2

我得到了我想要的东西，特别感谢：@Fabio和@JamesBurton （谢谢大家！）

Answer 1

确保将hide函数包装在$（document）.ready（）

中

$(document).ready(function(){
    $('.coding2').hide();
});

这将隐藏页面加载时的元素。

或使用纯javascript：

<html>
  <head>
  </head>
  <body>
    Your HTML here

    <script>
        document.querySelector('.coding2').style.display = 'none';
    </script>
  </body>

</html>

或者使用CSS：

.coding2 {
    display: none;
}

Answer 2

为您的div添加ID并使用

下面的代码

<div id="coding2" class="coding2">
        <div class="box">
            <div class="JavS">
                <h1>JavaScript</h1>
                <span class="barr"></span>
                <p>bla bla bla bla bla</p>
            </div>
            <div class="htmlCSS">
                <h1>HTML/CSS</h1>
                <span class="barr"></span>
                <p>bla bla bla bla bla </p>
            </div>
            <div class="php">
                <h1>PHP</h1>
                <span class="barr"></span>
                <p>bla bla bla bla bla</p>
            </div>
        </div>
    </div>
<script>

  $(function(){
    $('#coding2').hide();
});

</script>

Answer 3

据我所知，你实际上没有调用隐藏它的函数。你需要决定是否要在点击按钮等时隐藏它。（所以添加一个调用该功能的按钮）。

如果您希望默认隐藏它，那么在您要隐藏的div下方添加JavaScript文档，并在函数window.onload = function(){ //enter your code };之前添加它。顺便提一下，这是纯JavaScript。

您还需要为div添加一个ID，因为您现在拥有的是一个类，因此添加id="coding2"并且您不需要＃或。在你的getElementByID。

希望这有帮助。

编辑：鉴于你在这个答案的评论中告诉我的，我会说你应该考虑用CSS创建一个网格系统。这是一个关于制作一个http://j4n.co/blog/Creating-your-own-css-grid-system

的非常好的教程

然后您可以使用％s来确保您的布局适应并根据进行媒体调用的屏幕大小更改大小。我不认为JS是要走的路。

我在主要问题的评论中看到，在CSS中使用display: none做了你想要的。为了用JS做到这一点，只需通过document.getElementById("coding2").style.display = "none";添加带有JS的CSS样式。

Javascript / jQuery不会隐藏HTML元素

3 个答案: