javascript - 如何通过单击菜单中的 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>

我希望当用户按下标签时，html 页面会加载到 <div id=result>我在本页底部有。

我尝试使用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 Documentation

您需要将 HTML 文件的路径作为 字符串 传递。

替换

$('#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
});