How to load a html page from href into a div by clicking a Li inside a menu?

Question

i have a ul menu

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

and i want when the user press on a tag the html page load on <div id=result> that i have in bottom of this page.

i try that with jquery as i found but the html in href load on new tab there is my code:

  <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

Read up .load() | jQuery API Documentation

You need to pass the paths of HTML files as string .

Replace

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

with

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

EDIT:

In response to your comment, try this:

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