Click to a new id on an outside HTML page embedded in a div

Question

I have a working image gallery with a thumbs navigation bar below, which includes a mouse rollover effect. When clicking on a thumb, the main image changes by calling up a different div id layout (with a different main background image.) However, I'm running this from a parent HTML page (main page) that swaps to this child HTML in a div. When I try clicking to a new id within the child page, the parent reads it as its own. How can I identify that the href div id is nested in the external/child HTML?

Here is the div used in the child HTML navigation sitting in the parent div, with href pointing to #smooth, etc:

<div id="container1">
<ul id="flavors1">
    <nav id="menu2"><ul class="coffeenav"><li class="smooth"><a href="#smooth">Smooth Caffeinator</a></li></ul></nav>
    <nav id="menu2"><ul class="coffeenav"><li class="vanilla"><a href="#vanilla">Vanilla Dream</a></li></ul></nav>
    <nav id="menu2"><ul class="coffeenav"><li class="handsome"><a href="#handsome">Dark and Handsome</a></li></ul></nav>
    <nav id="menu2"><ul class="coffeenav"><li class="dabomb"><a href="#dabomb">Da Bomb</a></li></ul></nav>
    <nav id="menu2"><ul class="coffeenav"><li class="choconut"><a href="#choconut">Choconut</a></li></ul></nav>
</ul>
</div>

This is the parent HTML, which includes its own rollover navigation that clicks and calls up the child HTML (where the problem exists -- you'll notice the small thumb navigation does not work):

http://mmdsgn.com/divsample/

And this is the child/nested HTML inside the div, with working nav (only first 3 thumbs):

http://mmdsgn.com/divsample/coffee.html

Answer 1

OK Lets start with your HTML, it is not valid for a start. ID should be unique, if it's not unique, use class instead. The only valid child elements for ul are li elements. Further more you have nested ul with only one item which does not seem to make sense. Also nav is meant to denote a navigation section (http://html5doctor.com/nav-element/) I would recoment seomething like the following:

<nav id="container1">
    <ul id="flavors" class="coffeenav">       
        <li class="smooth"><a href="#smooth">Smooth Caffeinator</a></li>
        <li class="vanilla"><a href="#vanilla">Vanilla Dream</a></li>
        <li class="handsome"><a href="#handsome">Dark and Handsome</a></li>
        <li class="dabomb"><a href="#dabomb">Da Bomb</a></li>
        <li class="choconut"><a href="#choconut">Choconut</a></li>
    </ul>
</nav>

Now as to why I think what you are trying to do is a bad idea. You're breaking the back button, which is generaly considered bad form. How does a user navigate backwards using the browser? How will users bookmark their new favourite "Wakey Wakey" coffee page? With the way tou're heading with this, it won't be possible.

If you want to continue down this route investigate the jquery on method. This binds event so dynamicaly loaded can have event handlers assigned to them. You would want to use something like the following:

$(document).ready(function () {
     $('#web').on('click', '#flavors li a', function () {
         $('#web').load('coffee.html #' + $(this).attr('href'));
         return false;
     });
});

What this code does is say for any click on '#flavors li a' which exist now or in the future within the #web element perform the load action. The main difference to what you have at the moment is that click binds the event handler to elements that exsit in the DOM when the page is loaded, courtesey of the document.ready call. Change or remove elements and the handler binding is broken. Using on enables the evenh handler to be bound to dynamicaly added elements.

Update

Looking at your latest sample from the comments, it looks like i've made some false assumptions regarding your ID's and have given you a selector for jquery that wont work as the ID's for the navs change, which is OK as ID's are meant to be unique on a page. Looking for the next point of commanality, I can see the "coffeenav" class so lets use this instead....

$(document).ready(function () {
     $('#web').on('click', '.coffeenav li a', function () {
         $('#web').load('coffee.html #' + $(this).attr('href'));
         return false;
     });
});