Question

我正在开发一个HTML网站，我有10个不同的HTML页面。菜单栏应该在每个页面上都可见...即。在菜单栏下面的div内容应该更改...单击菜单项后，html页面应加载到该div ..

Answer 1

构建完整标记（使用正确的doctype）。
将jQuery添加到您的页面。
等待文件准备好。
将click个事件处理程序附加到导航链接。
禁用链接的默认行为。
使用ajax加载所需页面并将收到的数据插入容器。

<!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>

Answer 2

JQUERY：

$( document ).ready(function() {
$( "#career" ).click(function() {
$("#content").load("careers.html");
});
});

其中#career:是标签按钮 #content:是加载html的div

如何在单击菜单项的DIV中加载HTML页面

2 个答案: