0

I've been trying to replace part of page marked as "content" with content of different html file. Unfortunately, I don't know much about JS.

Here's the code of index.html file:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="./js/jquery.js"></script>
<script>
    $(document).ready(function(){
        $("home").on("click", function(){
            $("#content").load("./home.html");
        });
        $("contact").click(function(){
            $("content").load("./contact.html");
        });
    });
</script>
</head>

<body>
<div id="header">
<table class="tg">
  <tr>
    <th><a href="#" id="home">ABOUT</a></th>
    <th><a href="#" id="contact">CONTACT</a></th>
  </tr>
</table>
</div>

<div id="content"></div>

</body>
</html>

And here's the home.html file:

<h1>MyTitle</h1>
<p>Content I want to see</p>

I've found similiar threads on stackoverflow (JS script is basically copied from here) but it still doesn't work. Can anybody explain to me what am I missing?

Community
  • 1
  • 1
AZV
  • 35
  • 5
  • 2
    You're missing the `#` in several of your selectors. Ex: `$("home")` `$("content")` `$("contact")` – j08691 May 25 '16 at 14:30

1 Answers1

3

You're missing hash in front of id selector, your code should look like this:

$(document).ready(function(){
    $("#home").on("click", function(){
        $("#content").load("./home.html");
    });
    $("#contact").click(function(){
        $("#content").load("./contact.html");
    });
});
jcubic
  • 61,973
  • 54
  • 229
  • 402
  • I uploaded the whole thing to the server and it works exactly how I wanted. Thanks a lot! – AZV May 25 '16 at 14:50