如何在点击菜单项时在DIV中加载HTML页面 [英] how to load HTML page in DIV on clicking menu items
本文介绍了如何在点击菜单项时在DIV中加载HTML页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用HTML开发网站，我有10个不同的HTML网页。菜单栏应该在每个页面上可见...在div菜单栏下面的内容应该改变... html页面应该加载到div后点击菜单项..
I am developing a website in HTML,I have 10 different HTML pages. menu bar should be visible on each page...i.e. on div content below the menu bar should be changed...html page should be load into that div after clicking on menu item..
推荐答案
- 建立完整的标记（正确的doctype）。
- 将jQuery新增至您的专页。
- 停用默认行为。
- 使用ajax加载所需页面并将收到的数据插入容器。
- Build your full markup (with correct doctype).
- Add jQuery to your page.
- Wait for document ready.
- Attach
clickevent handlers to your navigation links. - Disable default behaviour of links.
- Load desired page with ajax and insert received data to a container.
< >
<!doctype html>
<html>
<head>
<title>My Ajax Website</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function () {
$('#nav a').on('click', function (e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
});
});
</script>
</head>
<body>
<div id="nav">
<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
<a href="page3.html">Page 3</a>
<a href="page4.html">Page 4</a>
<a href="page5.html">Page 5</a>
</div>
<div id="content">
Welcome! Use the menu to navigate website.
</div>
</body>
</html>
这篇关于如何在点击菜单项时在DIV中加载HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
