HTML按钮onclick事件不起作用

Question

I want html button "News"to show my div "New" which is hidden here's my code( it's not working right now):

<div id = "Buttons">
    <button id="News">News</button><br>
    <button id="Marks">Marks</button><br>
    <button id="Averages">Averages</button><br>
    <button id="Forum">Forum</button><br>
</div>  
<div id="New">
    <p id="Newer">Text</p>
</div>

#New{
        display: none;
        width: 500px;
        height: 500px;
        background-color: grey;
}

$(document).ready(function(){
    $("#News").click(function() {
        $("#New").show();
    });
});

Answer 1

<div id = "Buttons">
    <button id="News">News</button><br>
    <button id="Marks">Marks</button><br>
    <button id="Averages">Averages</button><br>
    <button id="Forum">Forum</button><br>
</div>  
<div id="New">
    <p id="Newer">Text</p>
</div>

<style>          <---------------this
#New{
        display: none;
        width: 500px;
        height: 500px;
        background-color: grey;
}
</style>          <---------------this

<script>          <---------------this
$(document).ready(function(){
    $("#News").click(function() {
        $("#New").show();
    });
});
</script>         <---------------this

Answer 2

You can't just put styles and scripts as text into your HTML page. You have have to tell the browser what it should do with the code.

First, you need to wrap your code in the appropriate tags:

<style>
#New{
    display: none;
    width: 500px;
    height: 500px;
    background-color: grey;
}
</style>
<script>
$(document).ready(function(){
    $("#News").click(function() {
        $("#New").show();
    });
});
</script>

Second, you need to make sure JQuery is included before your script tag:

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id = "Buttons">
    <button id="News">News</button><br>
    <button id="Marks">Marks</button><br>
    <button id="Averages">Averages</button><br>
   <button id="Forum">Forum</button><br>
</div>  
<div id="New">
    <p id="Newer">Text</p>
</div>

Answer 3

I'm assuming you're example is shortened up. Meaning, I'm assuming you have a <script> along with a <style> . If not, those are necessary. Also, I would seriously think about re-naming some of your stuff. For example, anytime you have a wrapper that represents a series of similar elements, use a class name instead of id . For example, I'd replace your div with a class instead of id like so:

<div class="buttons">
    <button id="news">News</button><br>
    <button id="marks">Marks</button><br>
    <button id="averages">Averages</button><br>
    <button id="forum">Forum</button><br>
</div>  

<div id="New">
    <p id="Newer">Text</p>
</div>

That being said, your code works as is if you add the appropriate tags like so:

<div class="buttons">
    <button id="news">News</button><br>
    <button id="marks">Marks</button><br>
    <button id="averages">Averages</button><br>
    <button id="forum">Forum</button><br>
</div>  

<style>
    #New{
        display: none;
        width: 500px;
        height: 500px;
        background-color: grey;
    }
</style>

<script>
    $(document).ready(function(){
        $("#News").click(function() {
            $("#New").show();
        });
    });
</script>