Javascript/jQuery赢得't隐藏HTML元素

Javascript/jQuery won't hide HTML element

本文关键字：隐藏 HTML 元素 jQuery 赢得 Javascript      更新时间：2023-09-26

我试图在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>

我已经试过了我所说的一切，通常我会在谷歌上搜索一遍，然后再问它，但这次，我不明白为什么它没有隐藏起来。

@编辑

我在"mainjquery.js"中尝试的代码

（带jQuery）

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

（使用纯JavaScript）

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

和

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

（是的，我上一次把类"coding2"编辑为id="coding1"是什么时候做的，但它什么都没做）

我想隐藏整个div"coding2"

@edit2

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

确保将隐藏函数包装在$（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;
}

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

如果您希望它在默认情况下被隐藏，那么在您的JavaScript文档中添加到您想要隐藏的div下面，并将其添加到函数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";将CSS样式添加到JS中即可。

在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>
相关文章：