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

时间:2013-06-11 06:15:04

标签: jquery html css

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

2 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:0)

JQUERY:

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

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