how to load external div into a master.html div fr

问题:

I am using a submenu to display a div from an external html file in a div in the master.html file.

I have looked through at least 20 examples of similar related things but cannot for the life of me get my code to work and unfortunately while I know why I don't know how to solve the problem.

So I have a sub menu defined in css:

#subnav ul li#subone a:hover{color:#ffffff; background-color: #1e3435;}

I Have master.html with the html for the submenu

<div id="subnav" >
    <ul>
        <li id="subone"><a href="#">About</a></li>
        <li id="subtwo"><a href="home.html">Home</a></li>

</div>

And I am using this javascript code with the jquery.js included in the header:

<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
    $(".subnav ul li a") .click(function(e){
        e.preventDefault()
        $('#content2').load( 'abc.html' );
    });
});
</script>

I know something is wrong here but can't quite figure it out, any help would be greatly appreciated.

回答1:

At first glance:

$(".subnav ul li a").click(...)

Should be

$("#subnav ul li a").click(...)

Because you have used <div id="subnav" >. Use # for id and . for class.

Update: To load content from a particular element you may use this:

$("#content2").load("abc.html  #container");

Here, #container is the id of the element and only this element's html will be loaded into target div, so make sure you use the right identifier. Read more on jQuery website.

Update: You may use one function/handler for all of your menu items:

$(function(){
    $(".subnav ul li a") .click(function(e){
        e.preventDefault()
        $('#content2').load($(this).attr('href') + ' #content');
    });
});

Make sure your all pages/html file contains same #content so every time you click on any menu item, the appropriate html file would be loaded into $('#content2') div bt only #content part of the page and also provide proper link (href='filename.html') for all menu items.

If your all pages don't have the same id as #content then add a data-target='identifier' in each a tag, like this:

<div id="subnav" >
    <ul>
        <li><a href='abc.html' data-target='content'>Abc</a></li>
        <li><a href='def.html' data-target='someid'>Edf</a></li>
    </ul>
</div>

So in this case, you may use something like this:

$('#content2').load($(this).attr('href') + ' #' + $(this).attr('data-target'));