如何通过单击菜单中的Li将HTML页面从href加载到div中？

Question

我有一个ul菜单

                   <ul>
                      <li>
                        <a href="../folder/rules.html" id="rules">rules</a>
                    </li>
                    <li>
                        <a href="../folder/service.html" id="service">Service</a>
                    </li>
                    </ul>

我想当用户按下标签时，我在此页面底部的<div id=result>上加载html页面。

我尝试用jquery进行尝试，但是在新选项卡上的href中的html加载了我的代码：

  <script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(funtction(){
        $("#rules").click(function()
             $('#result').load(rules.html);
        });
        $("#service").click(function(){
            $('#result').load(service.html);
        })
    });
     </script>

Answer 1

阅读.load() | jQuery API文档

您需要将HTML文件的路径作为string传递。

更换

$('#result').load(rules.html);

与

$('#result').load('../folder/rules.html');

编辑：

为了回应您的评论，请尝试以下操作：

$("#rules").click(function(event)
     $('#result').load('../folder/rules.html');
     event.preventDefault(); // so that the event does not bubble up
});