Jquery change .load location
I'm trying to make a menu using the .load function but I don't know how to
change the page it's using.
This is what I have...
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="header"></div>
<div id="menu"></div>
<div id="main"></div>
<script>
$("#header").load("header.html");
$("#menu").load("menu.html");
$("#main").load("main.html");
</script>
<body>
</html>
menu.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>
<div class="menu-item">
<div class="menu-text" id="menu-item1">
Click me!
</div>
</div>
<body>
</html>
So when div id "menu-item1" in menu.html is clicked then it should change
$("#main").load("main.html"); to $("#main").load("OTHERmain.html"); in
index.html for example.
No comments:
Post a Comment