Search code examples
javascripthtmlloadinghref

Loading HTML file into a DIV with menu links

I am extremely stuck on what I know is a very simple problem for experts. I am a bit of a novice. I am creating menu links which load a HTML file into a DIV. However it keeps loading into another window. I am using the following code:

<a href="ifitting" 
onclick="document.
         getElementById('iftext').
         innerHTML = '<p>MYCONTENT</p>';"
>
LINKID
</a>

"ifitting" is the menu link located in the "Navigate" div id.

I need it to load into the 'iftex" div id.

Here is a link to the testing page:

http://www.infinitefashions.com/test1.html

Any feedback that can be provided would be much appreciated. I have been stuck on this for two days and have not found a working answer(that I understood how to overcome anyway;)

Solution

  • You have two problems :

    First your href shouldn't take you to "ifitting" which is another page, but to "#ifitting" for example, which would be a bookmark in the same page. And then you shouldn't have a line break inside your js innerHTML.

    This works :

    <a href="#ifitting" onclick="document.getElementById('iftext').innerHTML = '&lt;p&gt;Client Consultation:&lt;br&gt;Process begins with discussing our customers’ personal tastes and their needs with the designer. We assess the function of the garment and advise on suitable cloths from our library of patterns, linings and trims.&lt;/p&gt;';">Initial Fitting</a>

    Notice the href="#ifitting" and the <br> inserted in the innerHTML.